Material del carrusel para mujer
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 " lt/a gt; gt
lt李gt lta href = " news.html " gt ltimg src = " img/LAN mei . png " gt/a gt/李gt
lt;李gt lta href = " news.html " gt ltimg src = " img/lizhi . png " gt； lt/a gt； lt/李gt
lt李gt lta href = " news.html " gt ltimg src = " img/new . png " gt; lt/a gt; lt/李gt
lt/ul gt;
lt! -Focus->;
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; =" botón derecho " > ltimg src = " img/right . png "/ gt; lt/div gt
lt/div gt
Estilo:
. out {
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: centro;
Alto de línea: 20 píxeles
Pantalla: bloque en línea;
Tamaño de fuente: 16 píxeles;
Borde: 2px color sólido #666;
Margen derecho: 10px;
Cursor: puntero;
}
. salir. btn {
Posición: absoluta
arriba: 50
Margen superior: -20px; p>
Fondo: rgba(0, 0, 0, 0);
Color: # FFFFFF
Alineación del texto: centro;
Altura de línea : 60px
Tamaño de fuente: 40px
Pantalla: Ninguna
Cursor: puntero
}
. BTN img {ancho: 50px; alto: 40px}
. salir. Número li.active-1 {
Fondo: #666;
Color: #fff
}
. Fuera: flotar. btn {
Pantalla: bloquear
}
. 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(){
var size=$("img李"). size()
for(var I = 1; ilt=size;i){< / p>
var li = " lt李> I " lt /李>;
$(".num"). p>/*size obtiene el número actual de elementos*/
//Controla manualmente el carrusel
$(".img李") Muestra la ecuación (0)<. /p>
$(".小水李"). Equation(0). addClass('active-1 ')
/*Se puede cambiar el mouse para hacer clic en el evento*/<. /p>
$(".小水李"). mouseover(function(){
$(this). addClass('active-1 '). Hermanos y hermanas ("Li" ). removeClass('active-1 ')
Var index = $(this index ()/* index representa el valor del índice del elemento actual*/
I = index; //el valor i es el mismo que el valor de autorrotación
$ (".imgli"). fadein (/* desvanecimiento en nivel().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()
})
});