Kode efek gulir gambar JS yang sangat halus, loop tanpa batas, kecepatan yang dapat disesuaikan, berhenti saat mouse melayang. Fiturnya adalah pemisahan JS dan alamat gambar.
Salinan kode adalah 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 = gb2312" />
<Title> gulir gambar </iteme>
</head>
<body>
<type style = "text/css">
<!-
#demo {
Latar belakang: #FFF;
meluap: tersembunyi;
Perbatasan: 1px putus #CCC;
Lebar: 500px;
}
#demo img {
BORDER: 3PX SOLID #F2F2F2;
}
#indemo {
float: kiri;
Lebar: 800%;
}
#demo1 {
float: kiri;
}
#demo2 {
float: kiri;
}
->
</tyle>
<Div id = "Demo">
<Div id = "indemo">
<Div id = "Demo1">
<a href = "#"> <img src = "/jscss/demoimg/wall_s1.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s2.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s3.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s4.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s5.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s6.jpg"/> </a>
</div>
<Div ID = "Demo2"> </div>
</div>
</div>
<script>
<!-
var speed = 10;
var tab = document.getElementById ("demo");
var tab1 = document.geteLementById ("demo1");
var tab2 = document.geteLementById ("demo2");
tab2.innerHtml = tab1.innerHtml;
fungsi marquee () {
if (tab2.offsetwidth-tab.scrollleft <= 0)
tab.scrollleft- = tab1.offsetWidth
kalau tidak{
tab.scrollleft ++;
}
}
var mymar = setInterval (marquee, speed);
tab.onMouseOver = function () {clearInterval (mymar)};
tab.onMouseout = function () {mymar = setInterval (marquee, speed)};
->
</script>
</body>
</html>