Contoh artikel ini menggambarkan bagaimana JS dapat mencapai efek switching gambar yang baik di Baidu Alliance. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<Title> JS menyadari efek switching gambar yang baik di Baidu Alliance </iteme>
<body>
<script>
var link = array baru ();
tautan [1] = "http://www.baidu.com/";
tautan [2] = "//www.vevb.com/";
tautan [3] = "http://www.sohu.com/";
tautan [4] = "http://sc.vevb.com/";
var imgs = array baru ();
untuk (var n = 1; n <= 5; n ++) imgs [n] = gambar baru ();
imgs [1] .src = "gambar/m01.jpg";
imgs [2] .src = "gambar/m02.jpg";
imgs [3] .src = "gambar/m03.jpg";
imgs [4] .src = "gambar/m04.jpg";
var tits = array baru ();
payudara [1] = "pencarian baidu";
Tits [2] = "wulin.com";
Tits [3] = "Sohu Homepage";
payudara [4] = "rumah material";
var imgwidth = 550; // lebar gambar
var imgheight = 134; // lebar gambar
var str = "<style type = 'text/css'>";
str += "#imgnv {display: none; position: absolute; bawah: -1px; kanan: 0; tinggi: 16px;}#imgnv div {float: kiri; margin-hak: 1px;}";
str += "#imgnv div.on,#imgnv div.off {margin-bottom: 1px; lebar: 30px; tinggi: 15px; line-height: 18px! Penting; line-height: 15px; font-size: 9px; text-align: center; Cent; kursor: pointeror: cursor: hand} hand;
str += "#ImGNV div.on {latar belakang:#ce0609; warna: #fff; font-weight: bold}";
str += "#IMGNV Div.off {latar belakang:#323232; Color: #fff; Text-Decoration: None}";
str += "#titnv {margin-top: 3px; warna:#000; text-align: center; display: none;}";
str += "</tyle>";
str += "<div style = 'posisi: relatif'>";
str + = "<div> <a id = 'dlink' href = '" + tautan [1] + "' target = '_ blank'> <img id = 'dimg' src = '" + imgs [1] .src + "' border = '0' width = '" + imgwidth + "' '' + IMGH = '0' width = '" + IMGWIDTH + "' '' ' + IMGH =' 0 '0' + ' + IMGH ='" IMGWIDTH = '"IMGH; onmouseover = 'jeda (true)' onmouseout = 'jeda (false)'> </a> </div> ";
// Modifikasi Poin 1: Melingkarkan Konten Div Dalam untuk Meningkatkan Jumlah
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><div id='it3' class = 'on' onMouseOver = 'imgswitch (3, true)' onmouseout = 'pause (false)'> 3 </div> <div id = 'it4' class = 'off' onmouseover = 'imgswitch (4, true)' onmouseout = 'jeda (false)'> 4 </div> </div> ";
str + = "<div id = 'titnv'> <b>" + tits [1] + "</b> </div>";
str += "</div>";
Document.write (str);
var oi = document.geteLementById ("dimg");
var jeda = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var delay = (document.all)? 400: 700;
fungsi setalpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = opacity;
}kalau tidak{
oi.style.mozopacity = ((opacity> = 100)? 99: opacity) / 100;
}
}
fungsi imgswitch (id, p) {
if (p) {
jeda = true;
opacity = 100;
Setalpha ();
}
oi.src = imgs [id] .src;
document.geteLementById ("dlink"). href = tautan [id];
document.geteLementById ("it" + lastId) .className = "off";
document.geteLementById ("it" + id) .className = "on";
document.geteLementById ("titnv"). innerHtml = "<b>" + tits [id] + "</b>";
curid = lastId = id;
}
function scrollimg () {
if (jeda && opacity> = 100) return;
if (sw == 0) {
opacity += 2;
if (opacity> delay) {opacity = 100; SW = 1; }
}
if (sw == 1) {
opacity -= 3;
if (opacity <10) {opacity = 10; SW = 3; }
}
Setalpha ();
if (sw! = 3) kembali;
SW = 0;
Curid ++;
// Ubah Poin 2: 4 Di sini juga ada angka
if (curid> 4) curid = 1;
Imgswitch (curid, false);
}
fungsi jeda {
jeda = s;
}
fungsi startCroll () {
setInterval (scrollimg, speed);
}
function checkload () {
if (imgs [1] .complete == true && imgs [2] .complete == true) {
ClearInterval (CheckID);
setTimeout (StartCroll, 2000);
}
}
var checkId = setInterval (checkload, 10);
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.