Este artigo descreve o método do JS+CSS para alcançar o efeito de comutação de slides de foco desbotado. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<título> A JS+CSS Fade-in Focus Picture Slide Switching Effect </ititle>
<estilo>
corpo, div, ul, li {margem: 0; preenchimento: 0;}
Ul {tipo de lista de lista: nenhum;}
Corpo {Background:#000; Text-Align: Center; Font: 12px/20px Arial;}
#Box {Posição: relativa; largura: 322px; altura: 172px; background: #ffff; radio de borda: 5px; borda: 8px Solid #FFFF; margem: 10px Auto;}
#Box .List {Posição: Relativo; Largura: 320px; Altura: 240px; Overflow: Hidden; Border: 1px Solid #CCC;}
#Box .List Li {Posição: Absoluto; TOP: 0; Esquerda: 0; Largura: 320px; Altura: 240px; Opacity: 0; Filtro: Alpha (Opacity = 0);}
#Box .List Li.Current {Opacity: 1; filtro: alfa (opacidade = 100);}
#Box .Count {Posição: Absolute; Right: 0; Bottom: 5px;}
#box .count li {cor: #ffff; float: esquerda; largura: 20px; altura: 20px; cursor: ponteiro; margem-direita: 5px; transbordamento: hidden; fundo:#f90; opacidade: 0.7; filtro: alfa (opacidade = 70); borda-radius: 20px;}
#box .count li.current {color: #fff; opacidade: 1; filtro: alfa (opacidade = 100); peso-fonte: 700; fundo:#f60;}
#tmp {largura: 100px; altura: 100px; fundo: vermelho; posição: absoluto;}
</style>
<script type = "text/javascript">
window.onload = function ()
{
var obox = document.getElementById ("caixa");
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ão de alternância
para (i = 0; i <anum.length; i ++)
{
anum [i] .Index = i;
anum [i] .onMouseOver = function ()
{
show (this.index)
}
}
// o mouse desliza e fecha o temporizador
obox.onMouseOver = function ()
{
ClearInterval (reprodução)
};
// as folhas do mouse e inicia a reprodução automática
obox.onMouseOut = function ()
{
AutoPlay ()
};
// Função automática
Função AutoPlay ()
{
play = setInterval (function () {
índice ++;
índice> = Aimg.Length && (index = 0);
show (índice);
}, 2000);
}
AutoPlay (); // Application Image Switching Fade Effect
Função mostra (a)
{
índice = a;
var alpha = 0;
para (i = 0; i <anum.length; i ++) anum [i] .className = "";
anum [índice] .className = "Current";
ClearInterval (timer);
for (i = 0; i <aimg.length; i ++)
{
Aimg [i] .style.Opacity = 0;
Aimg [i] .style.filter = "alfa (opacidade = 0)";
}
Timer = setInterval (function () {
alfa += 2;
alfa> 100 && (alfa = 100);
Aimg [índice] .style.Opacity = alfa / 100;
Aimg [índice] .style.filter = "alpha (opacity =" + alpha + ")";
alfa == 100 && ClearInterval (timer)
}, 20);
}
};
</script>
</head>
<Body>
<div id = "Box">
<ul>
<li> <img src = "/imagens/m01.jpg"/> </li>
<li> <img src = "/imagens/m02.jpg"/> </li>
<li> <img src = "/imagens/m03.jpg"/> </li>
<li> <img src = "/imagens/m04.jpg"/> </li>
<li> <img src = "/imagens/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 artigo seja útil para a programação JavaScript de todos.