Almacenamiento del material del transportador

Código HTML:

& ltdiv class="out "

& lt! -Carrusel->;

& ltul class="img " >>p>

& lt李& gt& lta href = " news.html " & gt& ltimg src = " img/suan mei . png " & gt; & lt/a & gt; & lt/李& gt

& lt李& gt& lta href = " news.html " & gt& ltimg src = " img/Xiang cheng . png " & gt; & lt/a & gt; & lt/李& gt

& lt李& gt& lta href = " news.html " & gt& ltimg src = " img/LAN mei. " & gt; & lt/a & gt; & lt/李& gt

& lt李& gt& lta href = " news.html " & gt& ltimg src = " img/lizhi png " &. gt;& lt/a & gt;& lt/李& gt

& lt/ul & gt;

& lt! -Enfoque->;

& ltul class = " num " & gt

& lt/ul & gt;

& lt! -Flechas izquierda y derecha-& gt;

& ltdiv class="left btn " >& ltimg src = " img/left . png "/& gt;& lt/div & gt;

& ltdiv class="right btn " >& ltimg src = " img/right . png "/& gt;& lt/div & gt;

& lt/div & gt;

Estilo:

. Fuera {

Ancho: 400px

Alto: 300px

Margen: 30px 0;

Posición: relativa;

Flotador: izquierda;

}

. img李{

Posición: absoluta;

arriba:0px;

Izquierda:0px

Pantalla: ninguna;

Alto: 320px

Ancho: 400px

}

. Li img{

Ancho: 100%;

Alto: 320px

}

. salir. Cantidad {

Posición: absoluta;

Abajo: 0px

Izquierda: 0px

Tamaño de fuente: 0px

Alineación del texto: centro;

Ancho: 100%

}

.

num li {

Ancho: 20px

Alto: 20px

Fondo: Ninguno

Color: # 666

Alineación del texto: centrado;

Alto de línea: 20 px

Pantalla: bloque en línea;

Tamaño de fuente: 16 px;

Borde: 2px color sólido #666;

Margen derecho: 10px;

Cursor: puntero;

}

. salir. btn {

Posición: absoluta

arriba:50%;

Margen superior:-20px

Altura: 60 px; /p>

Fondo: rgba(0, 0, 0, 0);

Color: # FFFFFF

Alineación del texto: centrado;

Línea altura: 60px

Tamaño de fuente: 40px

Pantalla: Ninguna

Cursor: puntero

}

< p; >. Imagen BTN {ancho:50px; alto:40px}

. salir. Número li.active-1 {

Fondo: # 666

Color: # fff

}

. Fuera: flotar. btn {

Pantalla:bloque

}

. salir. Izquierda {

Izquierda:0px

}

. salir. Derecha {

Derecha: 0px

}

Código Js:

Función showRestart(){

jQuery ('.Reanudar'). fadeTo(300, 1);

}

/**Reiniciar la demostración**/

Función reiniciar(){

jQuery('.reiniciar,.fader). CSS({ ' mostrar:' ninguno ' });

init()

}

$(función(){

//Loop for inferior

var size=$("img李").size()

for(var I = 1;i<=size;i++){

var li = "<李>+I+" </李>;

$(".num")

}

/*el tamaño obtiene el número actual de elementos*/

//Carrusel de control manual

$(".img李") Ecuación ( 0).

$(".小水李"). addClass('active-1 ')

/*Mouseover puede cambiar para hacer clic en el evento click*/

$(".小水李"). mouseover(function(){

$(this).addClass('active-1 ' ).sibling("Li").removeClass('active-1')

Var index = $(this)./* index representa el valor de índice del elemento actual*/

I = index; //el valor i es el mismo que el valor de autorrotación <. /p>

$ (".imgli").fadein() /).sibling().stop().

fadeout (/*fade out*/)/* EQ0Start */

});

//Controla automáticamente el tocadiscos

var I = 0;

Var t=setInterval(move, 3000) // temporizador

//derecha

Función mover(){

i++;

if(I = = tamaño){ I = 0;}

$(".小水李"). Ecuación (1). addClass('activo-1 '). Hermanos ("Lee"). eliminar clase(' active-1 ');

$(".img李"). Ecuación (1). encadenar(). hermanos(). fadeOut();

};

//Lado izquierdo

Función moveL(){

I-;

if(I = =-1){ I = tamaño-1;}

$(".小水李"). Ecuación (1). addClass('activo-1 '). Hermanos ("Lee"). eliminar clase(' active-1 ');

$(".img李"). Ecuación (1). encadenar(). hermanos(). fadeOut();

};

//Mueve automáticamente el mouse dentro y fuera del tocadiscos.

$(".fuera"). hover(función(){

Separación(t)

}, función(){

t=setInterval(move, 3000)

});

//Botones izquierdo y derecho

$(".Exit.Left"). Haga clic en (función(){

moveL()

})

$(".Out.Right"). Hacer clic(función(){

Mover()

})

});