Este artigo ilustra como o JS pode obter um bom efeito de comutação de imagem na Aliança Baidu. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <html>
<Title> JS percebe um bom efeito de comutação de imagem na aliança Baidu </ititle>
<Body>
<Cript>
var links = new Array ();
links [1] = "http://www.baidu.com/";
links [2] = "//www.vevb.com/";
links [3] = "http://www.sohu.com/";
links [4] = "http://sc.vevb.com/";
var iMgs = new Array ();
for (var n = 1; n <= 5; n ++) imgs [n] = new Image ();
imgs [1] .src = "imagens/m01.jpg";
imgs [2] .src = "imagens/m02.jpg";
imgs [3] .src = "imagens/m03.jpg";
imgs [4] .src = "imagens/m04.jpg";
var tits = new Array ();
mamas [1] = "Baidu Search";
mamas [2] = "wulin.com";
mamas [3] = "Sohu Homepage";
Tits [4] = "Material Home";
var imgwidth = 550; // largura da imagem
var iMghEight = 134; // Largura da imagem
var str = "<style type = 'text/css'>";
str += "#imgnv {display: nenhuma; posição: absoluto; inferior: -1px; direita: 0; altura: 16px;}#imgnv div {float: esquerda; margem-direita: 1px;}";
str += "#imgnv div.on,#imgnv div.off {margem-bottom: 1px; largura: 30px; altura: 15px; altura da linha: 18px! IMPORTANTE; HETURA DE LINHA: 15px; font-size: 9px; Text-align: Center; Cursor: Pointer; Cursor: Hand}";
str += "#imgnv div.on {background:#CE0609; cor: #fff; font-weight: Bold}";
str += "#imgnv div.off {background:#323232; cor: #fff; decoração de texto: nenhum}";
str += "#titnv {margin-top: 3px; cor:#000; text-align: Center; display: nenhum;}";
str += "</style>";
str += "<Div style = 'Posição: relativo'>";
str + = "<div> <a id = 'dlink' href = '" " + vincula [1] +"' alvo = '_ em branco'> <img id = 'dimg' src = '" + imgs [1] .src +"' border = '0' width = " + imgwidth +" 'altura =' " onMouseOver = 'pausa (true)' onmouseout = 'pausa (false)'> </a> </div> ";
// Modificar ponto 1: Looping o conteúdo interno da div para aumentar o número de
str += "<div id = 'imgnv'> <div id = 'it1' class = 'em' onMouseOver = 'imgswitch (1, true)' onMouseout = 'pausa (false)'> 1 </div> <div id = 'it2' class = 'off' onMouseover = 'iMgswitch (2, True)' OnMout class = 'em' onmouseover = 'imgswitch (3, true)' onmouseout = 'pausa (false)'> 3 </div> <div id = 'it4' class = 'off' onMouseOver = 'imgswitch (4, true)' onmouseout = 'pause (false)'> 4 </div> </div> ";
str + = "<div id = 'titnv'> <b>" + mamas [1] + "</b> </div>";
str += "</div>";
document.write (str);
var oi = document.getElementById ("DIMG");
var pause = false;
var curid = 1;
var lastId = 1;
var sw = 1;
var opacidade = 100;
var velocidade = 15;
var atraso = (document.all)? 400: 700;
função setalpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = opacidade;
}outro{
oi.style.mozopacity = ((opacidade> = 100)? 99: opacidade) / 100;
}
}
função imgswitch (id, p) {
if (p) {
pausa = true;
opacidade = 100;
Setalpha ();
}
oi.src = imgs [id] .src;
document.getElementById ("dlink"). href = links [id];
document.getElementById ("it" + lastId) .className = "off";
document.getElementById ("it" + id) .className = "on";
document.getElementById ("titnv"). innerhtml = "<b>" + mamas [id] + "</b>";
curid = lastId = id;
}
função scrollImg () {
if (pausa && opacity> = 100) return;
if (sw == 0) {
opacidade += 2;
if (opacidade> atraso) {opacity = 100; sw = 1; }
}
if (sw == 1) {
opacidade -= 3;
if (opacidade <10) {opacity = 10; sw = 3; }
}
Setalpha ();
if (sw! = 3) retornar;
sw = 0;
curid ++;
// Modificar o ponto 2: 4 aqui também está um número
if (curid> 4) curid = 1;
Imgswitch (curid, falso);
}
Função pausa (s) {
pausa = s;
}
função startcroll () {
setInterval (scrollimg, velocidade);
}
função checkload () {
if (imgs [1] .complete == true && imgs [2] .complete == true) {
ClearInterval (checkId);
setTimeout (StartCroll, 2000);
}
}
var checkId = setInterval (carga de verificação, 10);
</script>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.