¿Cómo agregar un carrusel a la página de inicio HTML?
El método del carrusel de imágenes aquí es un método al que hice referencia en Internet, pero también hice algunas mejoras yo mismo. Déjame publicar el código primero:
& lt! DOCTYPE HTML & gt
& lthtml & gt
& lthead & gt
& ltlink rel = " hoja de estilo " tipo = " texto/CSS " href = . /CSS/init 2. CSS ">
& ltscript type = "text/JavaScript" src = ". /js/jquery-1.11.3 . min . js " & gt; & lt/script & gt;
& ltscript type = " texto/JavaScript " src = ". /js/test 2 . js "& gt;& lt/script & gt;
& lt/head & gt;
& ltbody & gt
& ltdiv id = " diseño " & gt
& lt encabezado? class="clearfix " />
& ltdiv id = " banner " & gt
& ltul id = " banner _ img " & gt
& lt李& gt& ltimg src= ". /img/s 1 . jpg "& gt;& lt/李& gt
& lt李& gt& ltimg src= ". /img/S2 jpg "& gt;& lt/李& gt
& lt李& gt& ltimg src= ". /img/S3 jpg " & gt;& lt/李& gt
& lt/ul & gt;
& lt/div & gt;
& lt/header & gt;
& lt/div & gt;
& lt/body & gt;
& lt/html & gt;
En este directorio html, hay tres carpetas hermanas. Las imágenes en img, css y js almacenan los archivos css y js de esta página web respectivamente. Recuerde presentar aquí. orden, jquery. Debe colocarse delante de otros js.
El código HTML es muy simple y no necesita mucha explicación.
Mire el CSS introducido, init2.css
*{
Margen: 0px
Relleno: 0px
}
#Layout{
Ancho: 960px
Margen: 0 automático
}
#banner{
Posición: relativa;
Desbordamiento: oculto;
Ancho: 600 px
Alto: 200 px
Radio del borde: 10px;
Borde: 2px negro puro
}
#banner_img li{
Flotante: izquierda ;
tipo-estilo de lista:none;
}
#index{
Posición: absoluta;
Derecha: 8px
Abajo: 8px
}
#index李{
Flotador: izquierda;
Ancho: 16px;
Alto: 16px;
Alineación del texto: centrado;
Alto de la línea:
Radio del borde; : 5px
Borde: 1px sólido #FF7300
Fondo: blanco
Estilo de lista: ninguno
Margen izquierdo: 8px<; /p>
Cursor: puntero;
}
. clearfix: en {
Contenido: "";
Alto: 0px
Pantalla: bloque;
Borrar: ambos;
}
. En
{
Antecedentes: #FF7300
}
Css básicamente corresponde a las clases anteriores en html. claerfix se utiliza para limpiar flotadores. on representa el índice de la imagen que se reproduce actualmente en el índice de la imagen del carrusel. De hecho, el trasfondo ha cambiado. El índice aquí se agrega dinámicamente más adelante y no se puede ver en el html. La idea principal es configurar el contenedor de imágenes para que se desborde; ocultar;
La siguiente es una implementación relativamente simple, que utiliza los efectos fadeIn y fadeOut de jquery.
//Aparición y desaparición gradual
var time;
var index = 1;
var tol num = 3;
$(function(){
& ltspan style="white-space:pre " >& lt/span>.setInterval(" showBanner("+tolnum+"), 3000);
});
Función showBanner(n)
{
& ltspan style="white-space:pre " >& lt /span> var ul = $(" # banner _ img ");
& ltspan style="white-space:pre " >& ul.children(). & ltspan style="white-space:pre " >& lt/span>.ul.children(). fadeIn("slow");
& ltspan style="white-space:pre " >& lt/span>. index = index+1 & gt; n-1? index + 1;
}
Bueno, no sé por qué hay un error que no se desvanece cuando se llega a la última imagen. Por favor, dame tus sugerencias.
El segundo método es utilizar la animación jquery para implementar la conversión de atributos.
init();
Función init()
{
$(función(){
var índice = 0;
var adTime
var len = $("#banner_img li "). p>var banner Li = $(" # index Li ");
//Manejar índice
$(" #index Li") { mouseover(function() {
índice = $("#index li "). índice(este);
showImgs(índice
});
//toggleInterval
$("#banner "). hover(function(){
borrar intervalo(temporizador de anuncios);
}, función () {
temporizador de anuncios = setInterval(function(){
//alert(index);
showImgs(index);
index++;
if(index==len){
index = 0;
}
},2000)
}). Trigger(' mouse left ');
});
}
//Agregar índice automáticamente
Función para agregar índice (n)
{
var ul = $(" & lt; ul id = \ " index \ " & gt& lt/ul >) ;
for(var I = 1;i<=n;i++)
{
var Li = $(" <李>& lt/李>);
li.append(function(num){
Cantidad devuelta
}(I));
ul.append(李);
}
ul.niños(). primero(). agregar clase("on");
$("#banner_img "). append(ul);
}
Visualización de funciones (índice)
{
var ancho del anuncio = $(" # banner _ img>li:primero"). ancho();
$("#banner_img "). detener(verdadero, falso);
//$("#banner_img "). css('margin-left ', -index * ancho del anuncio+" px ");
$("#banner_img "). animación({
" marginLeft":-adwidth*index+"px "
},1000);
$(" #index李"). eliminarClass('en '). eq(exponente). add class("on");
}
Hover() es un método que reemplaza mouseenter y mouseleave, y se dice que es más fácil de usar. Trigger() activa el estado del objeto actual. El estado de salida del mouse se activa aquí para inicializar el temporizador, porque la configuración aquí es destruir el temporizador cuando el mouse se mueve a $ ("# banner"), bloquear la imagen actual y volver a agregar el temporizador cuando se mueve el mouse.
& ltpre nombre = " código " clase = " JavaScript " >$("#banner_img "). animación({
" marginLeft":-adwidth*index+"px "
},1000);
Este es el uso del método de animación en jquery, a través Pase el índice para cambiar el margen de banner_img, aquí está el margen izquierdo, por lo que la imagen se cepillará de derecha a izquierda (debe flotar si necesita cepillar de abajo hacia arriba, simplemente configure el margen superior). Descubrí que agregarlo dinámicamente en js Margins no activa transiciones CSS.