Este artículo describe el método de JS+CSS para lograr el efecto de conmutación de la diapositiva de la imagen de enfoque descolorido. 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> A JS+CSS Fade-In Focus Picture Slide Effect </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;
// 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 () {
índice ++;
índice> = AIMG.Length && (index = 0);
mostrar (índice);
}, 2000);
}
autoplay (); // efecto de conmutación de imagen de 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/m01.jpg"/> </li>
<li> <img src = "/images/m02.jpg"/> </li>
<li> <img src = "/images/m03.jpg"/> </li>
<li> <img src = "/images/m04.jpg"/> </li>
<li> <img src = "/images/m05.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.