Este artículo describe el método para cambiar automáticamente la dirección de conmutación de JS+CSS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS+CSS cambia automáticamente la dirección de conmutación del efecto de conmutación de diapositivas de imagen </title>
<estilo>
cuerpo, div, ul, li {margen: 0; relleno: 0;}
UL {Type de estilo List-Style: Ninguno;}
cuerpo {fondo:#000; text-align: centro; fuente: 12px/20px arial;}
#box {posición: relativo; ancho: 322px; altura: 172px; fondo: #ffff; border-radius: 5px; borde: 8px sólido #ffff; margen: 10px automático;}
#box .list {posición: relativo; ancho: 320px; altura: 240px; desbordamiento: oculto; borde: 1px sólido #ccc;}
#box .list li {posición: absoluto; arriba: 0; izquierda: 0; ancho: 320px; altura: 240px; opacidad: 0; filtro: alfa (opacidad = 0);}
#box .list li.current {opacidad: 1; filtro: alfa (opacidad = 100);}
#box .count {posición: absoluto; derecha: 0; abajo: 5px;}
#box .Count li {color: #ffff; float: izquierda; ancho: 20px; altura: 20px; cursor: pointer; margin-dight: 5px; desbordamiento: oculto; fondo:#f90; opacidad: 0.7; filtro: alfa (opacidad = 70); border-radio: 20px;}
#box .count li.Current {color: #fff; opacidad: 1; filtro: alfa (opacidad = 100); font-weight: 700; fondo:#f60;}
#tmp {ancho: 100px; altura: 100px; fondo: rojo; posición: absoluto;}
</style>
<script type = "text/javaScript">
Window.Onload = function ()
{
var obox = document.getElementById ("box");
var aul = document.getElementsBytagName ("UL");
var aImg = aul [0] .getElementsBytagName ("li");
var anum = aul [1] .getElementsBytagName ("li");
VAR TIMER = PLAY = NULL;
var i = index = 0;
VAR BORDER = True;
// Botón de alternar
para (i = 0; i <anum.length; i ++)
{
anum [i] .index = i;
anum [i] .onmouseover = function ()
{
show (this.index)
}
}
// El mouse se desliza y cierra el temporizador
obox.onmouseover = function ()
{
ClearInterval (Play)
};
// El mouse se va y comienza la reproducción automática
obox.onmouseOut = function ()
{
Autoplay ()
};
// función automática
function autoplay ()
{
play = setInterval (function () {
// juzga la orden de reproducción
borde ? índice ++: índice--;
// Orden original
índice> = AIMG.Length && (index = AIMG.Length - 2, border = falso);
// orden inverso
índice <= 0 && (index = 0, border = true);
// llamando a la función
Show (índice)
}, 2000);
}
autoplay (); // aplicación
Mostrar función (a)
{
índice = a;
var alfa = 0;
para (i = 0; i <anum.length; i ++) anum [i] .classname = "";
anum [índice] .classname = "actual";
ClearInterval (temporizador);
para (i = 0; i <aimg.length; i ++)
{
AIMG [i] .style.opacity = 0;
AIMG [i] .style.filter = "alfa (opacidad = 0)";
}
timer = setInterval (function () {
alfa += 2;
alfa> 100 && (alfa = 100);
AIMG [índice] .style.opacity = alfa / 100;
AIMG [índice] .style.filter = "alfa (opacidad =" + alfa + ")";
alfa == 100 && ClearInterval (temporizador)
}, 20);
}
};
</script>
</ablo>
<Body>
<div id = "box">
<ul>
<li> <img src = "/images/m06.jpg"/> </li>
<li> <img src = "/images/m07.jpg"/> </li>
<li> <img src = "/images/m08.jpg"/> </li>
<li> <img src = "/images/m09.jpg"/> </li>
<li> <img src = "/images/m10.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.