In diesen Artikelbeispielen wird veranschaulicht, wie JS in der Baidu -Allianz einen guten Bildumschalteffekt erzielen kann. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <html>
<titels> JS erkennt einen guten Bildumschalteffekt in der Baidu Alliance </title>
<body>
<Script>
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 ();
für (var n = 1; n <= 5; n ++) imgs [n] = new Image ();
IMGS [1] .src = "Bilder/m01.jpg";
IMGS [2] .src = "Bilder/m02.jpg";
IMGS [3] .src = "Bilder/m03.jpg";
IMGS [4] .src = "Bilder/m04.jpg";
var tits = new Array ();
Titten [1] = "Baidu -Suche";
tits [2] = "wulin.com";
Titten [3] = "Sohu Homepage";
Titten [4] = "Material Home";
var imgwidth = 550; // Bildbreite
var imgheight = 134; // Bildbreite
var str = "<style type = 'text/css'>";
str += "#imgnv {display: keine; Position: absolut; unten: -1px; rechts: 0; Höhe: 16px;}#imgnv div {float: links; margin-right: 1px;}";
STR += "#imgnv div.on,#imgnv div.off {margin-bottom: 1px; width: 30px; Höhe: 15px; Zeilenhöhe: 18px! Wichtig; Zeilenhöhe: 15px; Schriftgröße: 9px; Text-Align: Mitte; Cursor: Del an; Cursor: Hand}";
STR += "#imgnv div.on {Hintergrund:#CE0609; Farbe: #fff; Schriftgewicht: BOLD}";
str += "#imgnv div.off {Hintergrund:#323232; Farbe: #fff; Textdekoration: Keine}";
str += "#titnv {margin-top: 3px; color:#000; text-align: center; Anzeige: Keine;}";
str += "</style>";
str += "<div style = 'Position: relativ'>";
STR + = "<div> <a id = 'dlink' href = '" + links [1] + "' target = '_ leer'> <img id = 'dimg' src = '" + imgs [1] .src +' 'border =' 0 'width =' " + imgwidth + 'High =" + IMGHELTS + "". onmouseover = 'pause (true)' onmouseout = 'pause (false)'> </a> </div> ";
// Punkt 1 ändern: Der innere Div -Inhalt schleifen, um die Anzahl der Anzahl zu erhöhen
str += "<div id = 'imgnv'> <div id = 'it1' class = 'on' onmouseover = 'imgswitch (1, true)' onmouseout = 'pause (false)'> 1 </div> <div id = 'it2' class = 'off' aufmouseover = 'imgswitch (2, true)' auf) auf. class = 'on' onmouseover = 'imgswitch (3, true)' onmouseout = 'pause (false)'> 3 </div> <div id = 'it4' class = 'off' onmouseover = 'imgswitch (4, true)' onmousout = 'pause (false)'> 4 </div> </div> ";
str + = "<div id = 'titnv'> <b>" + tits [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 opacity = 100;
var Geschwindigkeit = 15;
var delay = (document.all)? 400: 700;
Funktion setalpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = opacity;
}anders{
oi.Style.mozopacity = ((Opazität> = 100)? 99: Deckkraft) / 100;
}
}
Funktion imgswitch (id, p) {
if (p) {
pause = wahr;
Opazität = 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;
}
Funktion scrollimg () {
if (pause && opacity> = 100) return;
if (sw == 0) {
Opazität += 2;
if (opacity> delay) {opacity = 100; SW = 1; }
}
if (sw == 1) {
Deckkraft -= 3;
if (opacity <10) {opacity = 10; SW = 3; }
}
Setalpha ();
if (sw! = 3) kehren Sie zurück;
SW = 0;
curid ++;
// Punkt 2: 4 Hier ist auch eine Zahl
if (curid> 4) curid = 1;
Imgswitch (curid, falsch);
}
Funktionspause (s) {
pause = s;
}
Funktion startcroll () {
setInterval (scrollimg, Geschwindigkeit);
}
Funktion Checkload () {
if (imgs [1] .complete == true && imgs [2] .complete == true) {
ClearInterval (checkId);
setTimeout (startcroll, 2000);
}
}
var checkid = setInterval (Checkload, 10);
</script>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.