Efek: Pindahkan mouse ke dalam gambar dan berhenti menggulir, dan mouse keluar secara otomatis gulungan
Dapat menyesuaikan gulir ke arah kiri atau kanan
Salinan kode adalah sebagai berikut:
<type style = "text/css">
* {
Margin: 0;
Padding: 0;
}
#Div1 {
meluap: tersembunyi;
Lebar: 712px;
Tinggi: 108px;
Margin: 100px Auto;
Posisi: kerabat;
Latar Belakang: Merah;
}
#Div1 ul {
Posisi: Absolute;
Kiri: 0;
TOP: 0;
}
#Div1 ul li {
float: kiri;
Lebar: 178px;
Tinggi: 108px;
List-style: tidak ada;
}
</tyle>
Salinan kode adalah sebagai berikut:
<body>
<a href = "javascript:;"> berjalan kaki </a>
<a href = "javascript :;"> berjalan ke kanan </a>
<Div id = "Div1">
<ul>
<li>
<img src = "IMG/SCROLL SAMPLISHLE/1.JPG"/>
</li>
<li>
<img src = "img/gulir mulus/2.jpg"/>
</li>
<li>
<img src = "IMG/SCROLL SAMPLUTES/3.JPG"/>
</li>
<li>
<img src = "img/gulir mulus/4.jpg"/>
</li>
</ul>
</div>
</body>
Di atas adalah tata letak sederhana, dan berikut ini adalah kode javascript utama
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
window.onload = function () {
var odiv = document.geteLementById ("div1");
var oul = odiv.getElementsbyTagname ('ul') [0];
var ali = oul.getElementsbyTagname ('li');
var speed = 2;
oul.innerhtml += oul.innerHtml;
oul.style.width = Ali [0] .offsetWidth * ali.length + 'px';
function move () {
if (oul.offsetleft <-oul.offsetWidth / 2) {
oul.style.left = '0';
}
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetWidth / 2 + 'px';
}
oul.style.left = oul.offsetleft + kecepatan + 'px';
}
var timer = setInterval (Move, 30);
odiv.onmouseover = function () {
clearInterval (timer);
};
odiv.onmouseout = function () {
timer = setInterval (Move, 30);
};
document.geteLementsbyTagname ('a') [0] .Onclick = function () {
kecepatan = -2;
};
document.geteLementsbyTagname ('a') [1] .onClick = function () {
Kecepatan = 2;
};
}
</script>
Izinkan saya menjelaskan secara singkat idenya:
Pertama, atur ul. Ada 8 gambar dalam total oul.innerhtml += oul.innerhtml;
Hitung lebar ul hingga lebar sebenarnya dari Li*8
Sembunyikan konten ekstra nanti
Catatan: oul.Offsetleft pasti negatif
Jadi jangan lewatkan tanda negatif saat membuat penilaian
Salinan kode adalah sebagai berikut:
if (oul.offsetleft <-oul.offsetWidth / 2) {
oul.style.left = '0';
}
Bagian ini berarti bahwa gambar bergulir di tengah jalan, dan dengan cepat menarik gambar ke belakang. Karena program dieksekusi terlalu cepat, hampir tidak mungkin untuk melihat pengguliran yang mulus.
Akhirnya, gunakan kecepatan variabel untuk mengontrol pengguliran di arah kiri dan kanan.
Kode di atas hanya mengimplementasikan fungsi paling dasar, dan teman dapat terus memperbaikinya berdasarkan ini.