Este artículo ejemplos ilustran cómo JS puede lograr un buen efecto de conmutación de imágenes en Baidu Alliance. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<title> JS se da cuenta de un buen efecto de conmutación de imágenes en Baidu Alliance </title>
<Body>
<script>
enlaces var = new Array ();
enlaces [1] = "http://www.baidu.com/";
enlaces [2] = "//www.vevb.com/";
enlaces [3] = "http://www.sohu.com/";
enlaces [4] = "http://sc.vevb.com/";
var imgs = new Array ();
para (var n = 1; n <= 5; n ++) imgs [n] = new image ();
imgs [1] .src = "imágenes/m01.jpg";
imgs [2] .src = "imágenes/m02.jpg";
imgs [3] .src = "imágenes/m03.jpg";
imgs [4] .src = "imágenes/m04.jpg";
var tits = new Array ();
tetas [1] = "Baidu Search";
tetas [2] = "wulin.com";
tetas [3] = "página de inicio de Sohu";
tetas [4] = "hogar material";
var imgwidth = 550; // Ancho de imagen
var imgheight = 134; // Ancho de imagen
var str = "<style type = 'text/css'>";
str += "#imgnv {display: none; posicion: absoluto; fondo: -1px; derecha: 0; altura: 16px;}#imgnv div {float: left; margin-right: 1px;}";
str += "#imgnv div.on,#imgnv div.off {margin-bottom: 1px; ancho: 30px; altura: 15px; línea de línea: 18px! IMPORTANTE; LINE-HEight: 15px; Font-size: 9px; Text-Align: Center; Cursor: Pointer; Cursor: Hand}";
str += "#imgnv div.on {fondo:#ce0609; color: #fff; font-weight: bold}";
str += "#imgnv div.off {fondo:#323232; color: #fff; text-decoration: none}";
str += "#titnv {margin-top: 3px; color:#000; text-align: center; display: none;}";
str += "</style>";
str += "<div style = 'Position: Relative'>";
str + = "<Stiv> <a id = 'dlink' href = '" + enlaces [1] + "' target = '_ blank'> <img id = 'dimg' src = '" + imgs [1] .src + "' border = '0' width = '" + imgwidth + "' ''" + imgheight + "style = 'filtre: alpha: alpha (100) onMouseOver = 'pause (true)' onMouseOut = 'pause (falso)'> </a> </div> ";
// Modificar el punto 1: enojar el contenido de div interno para aumentar el número de
str += "<div id = 'imgnv'> <div id = 'it1' class = 'on' onMouseOver = 'imgSwitch (1, true)' onMouseOut = 'pause (false)'> 1 </div> <div it = 'it2' class = 'off' onMouseOver = 'imgswitch (2, true)' onMouseOut = 'Pause (false)'> 2 <Div> Div Id = 'imgSwitch (2, true)' OnMouseOut = 'Pause (false)'> 2 </Divi class = 'on' onMouseOver = 'imgswitch (3, true)' onMouseOut = 'pause (false)'> 3 </div> <div id = 'it4' class = 'off' onMouseOver = 'imgswitch (4, true)' onMouseOut = 'PAUSE (false)'> 4 </div> </div> ";
str + = "<div id = 'titnv'> <b>" + tits [1] + "</b> </iv>";
str += "</div>";
document.write (str);
var oi = document.getElementById ("dimg");
var pausa = falso;
var curido = 1;
var lastid = 1;
var sw = 1;
Opacidad var = 100;
Velocidad var = 15;
Var demora = (documento.lal)? 400: 700;
función setalpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = opacidad;
}demás{
oi.style.mozopacity = ((opacidad> = 100)? 99: opacidad) / 100;
}
}
función imgswitch (id, p) {
if (p) {
pausa = verdadero;
opacidad = 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>" + tits [id] + "</b>";
curid = lastid = id;
}
función scrollimg () {
if (pause && opacidad> = 100) return;
if (sw == 0) {
opacidad += 2;
if (opacidad> retraso) {opacidad = 100; SW = 1; }
}
if (sw == 1) {
Opacidad -= 3;
if (opacidad <10) {opacidad = 10; SW = 3; }
}
Setalpha ();
if (sw! = 3) return;
SW = 0;
curido ++;
// modificar el punto 2: 4 Aquí también es un número
if (curid> 4) curido = 1;
Imgswitch (curido, falso);
}
pausa de la función (s) {
pausa = s;
}
function startscroll () {
setInterval (scrollimg, velocidad);
}
función checkload () {
if (imgs [1] .complete == true && imgs [2] .complete == true) {
ClearInterval (checkid);
SetTimeOut (Startscroll, 2000);
}
}
var checkId = setInterval (descarga de chech, 10);
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.