Artikel ini menjelaskan metode JS+CSS untuk mencapai efek switching slide fokus pudar. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<iteme> A JS+CSS Fade-in Focus Picture Slide Switching Effect </iteme>
<tyle>
Tubuh, Div, Ul, Li {Margin: 0; Padding: 0;}
UL {List-style-type: none;}
body {background:#000; text-align: center; font: 12px/20px arial;}
#box {position: relatif; lebar: 322px; tinggi: 172px; latar belakang: #ffff; border-radius: 5px; Border: 8px solid #ffff; margin: 10px auto;}
#box .list {position: relatif; lebar: 320px; tinggi: 240px; overflow: tersembunyi; perbatasan: 1px solid #ccc;}
#box .list li {position: absolute; atas: 0; kiri: 0; lebar: 320px; tinggi: 240px; opacity: 0; filter: alpha (opacity = 0);}
#box .list li.current {opacity: 1; filter: alpha (opacity = 100);}
#box .count {position: absolute; kanan: 0; bawah: 5px;}
#box .count li {color: #ffff; float: left; width: 20px; tinggi: 20px; kursor: pointer; margin-hak: 5px; overflow: tersembunyi; latar belakang:#f90; opacity: 0.7; filter: alpha (opacity = 70); border-radius: 20px;}
#box .count li.current {color: #fff; opacity: 1; filter: alpha (opacity = 100); font-weight: 700; latar belakang:#f60;}
#tmp {width: 100px; tinggi: 100px; latar belakang: merah; posisi: absolute;}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function ()
{
var obox = document.getElementById ("box");
var aul = document.geteLementsbyTagname ("ul");
var Aimg = AUL [0] .getElementsByTagname ("li");
var anum = aul [1] .getElementsByTagname ("li");
var timer = play = null;
var i = index = 0;
// Toggle Button
untuk (i = 0; i <anum.length; i ++)
{
anum [i] .index = i;
anum [i] .onmouseover = function ()
{
Tampilkan (this.index)
}
}
// Mouse menggesek dan menutup timer
obox.onmouseover = fungsi ()
{
ClearInterval (mainkan)
};
// mouse pergi dan mulai pemutaran otomatis
obox.onmouseout = function ()
{
autoplay ()
};
// fungsi autoplay
fungsi autoplay ()
{
play = setInterval (function () {
indeks ++;
index> = AIMG.Length && (index = 0);
tunjukkan (indeks);
}, 2000);
}
autoplay (); // Application Image Switching Fade Effect
acara acara (a)
{
indeks = a;
var alpha = 0;
untuk (i = 0; i <anum.length; i ++) anum [i] .classname = "";
anum [index] .className = "saat ini";
clearInterval (timer);
for (i = 0; i <Aimg.length; i ++)
{
AIMG [i] .Style.opacity = 0;
AIMG [i] .style.filter = "alpha (opacity = 0)";
}
timer = setInterval (function () {
alpha += 2;
alpha> 100 && (alpha = 100);
AIMG [INDEX] .Style.Opacity = alpha / 100;
AIMG [index] .style.filter = "alpha (opacity =" + alpha + ")";
alpha == 100 && clearInterval (timer)
}, 20);
}
};
</script>
</head>
<body>
<Div id = "box">
<ul>
<li> <img src = "/gambar/m01.jpg"/> </li>
<li> <img src = "/gambar/m02.jpg"/> </li>
<li> <img src = "/gambar/m03.jpg"/> </li>
<li> <img src = "/gambar/m04.jpg"/> </li>
<li> <img src = "/gambar/m05.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.