Ces exemples d'articles illustrent comment JS peut réaliser un bon effet de commutation d'image dans Baidu Alliance. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<Title> JS réalise un bon effet de commutation d'image dans Baidu Alliance </Title>
<body>
<cript>
var links = new Array ();
liens [1] = "http://www.baidu.com/";
liens [2] = "//www.vevb.com/";
liens [3] = "http://www.sohu.com/";
liens [4] = "http://sc.vevb.com/";
var imgs = new array ();
pour (var n = 1; n <= 5; n ++) imgs [n] = new image ();
imgs [1] .src = "images / m01.jpg";
imgs [2] .src = "images / m02.jpg";
imgs [3] .src = "images / m03.jpg";
imgs [4] .src = "images / m04.jpg";
var tits = new Array ();
Tits [1] = "Baidu Search";
seins [2] = "wulin.com";
seins [3] = "page d'accueil de Sohu";
seins [4] = "Material Home";
var imgwidth = 550; // largeur d'image
var imgheight = 134; // largeur d'image
var str = "<style type = 'text / css'>";
str + = "#imgnv {affichage: aucun; position: absolue; en bas: -1px; droit: 0; hauteur: 16px;} # imgnv div {float: gauche; margin-droite: 1px;}";
str + = "#imgnv div.on, # imgnv div.off {margin-bottom: 1px; width: 30px; height: 15px; line-height: 18px! Important; line-height: 15px; police-size: 9px; text-align: Center; cursor: pointeur; curseur: main}";;
str + = "#imgnv div.on {background: # ce0609; couleur: #fff; font-weight: bold}";
str + = "#imgnv div.off {background: # 323232; couleur: #fff; text-decoration: nul}";
str + = "#Titnv {margin-top: 3px; couleur: # 000; text-adign: Centre; affichage: aucun;}";
str + = "</ style>";
str + = "<div style = 'position: relative'>";
str + = "<v> <a id = 'dlink' href = '" + liens [1] + "' cible = '_ blanc'> <img id = 'dimg' src = '" + imgs [1] .src + "' border = '0' width = '" + imgwidth + "' height = '" + imgheight + "' 'style =' filter: alpha = 00) onMouseOver = 'Pause (true)' onMouseout = 'Pause (false)'> </a> </div> ";
// Modifier le point 1: boucle le contenu intérieur div pour augmenter le nombre de
str + = "<div id = 'imgnv'> <div id = 'it1' class = 'on' onMouseOver = 'imgSwitch (1, true)' onMouseout = 'Pause (false)'> 1 </ div> <div id = 'it2' class = 'off' onMouseOver = 'imgswitch (2, true)' onMouseout = 'Pause (false)'> 2 </ / div Id = it3 ' class = 'on' onMouseover = 'imgSwitch (3, true)' onMouseout = 'Pause (false)'> 3 </v> <div id = 'it4' class = 'off' onMouseOver = 'imgSwitch (4, true)' onMouseout = 'Pause (false)'> 4 </v> </v> ";;
str + = "<div id = 'titnv'> <b>" + seins [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 opacité = 100;
Var Speed = 15;
var retard = (document.all)? 400: 700;
fonction setalpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = opacity;
}autre{
oi.style.mozopacity = ((opacité> = 100)? 99: opacité) / 100;
}
}
fonction imgswitch (id, p) {
if (p) {
pause = true;
opacité = 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>" + seins [id] + "</b>";
curid = LASTID = id;
}
fonction Scrollimg () {
if (pause && opacity> = 100) return;
if (sw == 0) {
opacité + = 2;
if (opacity> retard) {opacity = 100; SW = 1; }
}
if (sw == 1) {
opacité - = 3;
if (opacity <10) {opacity = 10; SW = 3; }
}
Setalpha ();
if (sw! = 3) return;
SW = 0;
curid ++;
// Modifier le point 2: 4 Voici également un nombre
if (curid> 4) curid = 1;
Imgswitch (curid, false);
}
Fonction Pause (S) {
pause = s;
}
fonction startCroll () {
setInterval (Scrollimg, Speed);
}
Fonction Checkload () {
if (imgs [1] .compte == true && imgs [2] .compte == true) {
ClearInterval (CheckId);
setTimeout (StartCroll, 2000);
}
}
var checkId = setInterval (chèque, 10);
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.