Gulir mulus adalah efek khusus yang sering digunakan dalam proyek. Ada juga banyak kode sampel di internet. Di sini saya berbagi dengan Anda kode yang relatif sederhana dan praktis dengan kompatibilitas yang baik. Tolong pelajari dengan cermat.
Kode HTML:
Salinan kode adalah sebagai berikut:
<</span> html>
<</span> head lang = "en">
<</span> meta charset = "UTF-8">
<</span> judul> Gulir mulus </</span> judul>
<</span> skrip src = "js/0010.js"> </</span> skrip>
<</span> tautan rel = "stylesheet" type = "text/css" href = "css/0010.css"/>
</</span> head>
<</span> body>
<</span> a href = "javaScript:"> walk left </</span> a>
<</span> a href = "javaScript:"> walk right </</span> a>
<</span> div id = "div1">
<</span> ul>
<</span> li> <</span> img src = "gambar/1.jpg"> </ </span> li>
<</span> li> <</span> img src = "gambar/2.jpg"> </ </span> li>
<</span> li> <</span> img src = "gambar/3.jpg"> </ </span> li>
<</span> li> <</span> img src = "gambar/4.jpg"> </ </span> li>
</</span> ul>
</</span> Div>
</</span> body>
</</span> html>
Kode CSS
Salinan kode adalah sebagai berikut:
*{
Margin: 0;
Padding: 0;
}
#Div1 {
meluap: tersembunyi;
Latar Belakang: Biru;
Posisi: kerabat;
Lebar: 600px;
Tinggi: 150px;
Margin: 100px Auto;
}
#Div1 ul {
Posisi: Absolute;
Kiri: 0px;
Atas: 0px;
List-style: tidak ada;
}
#Div1 ul li {
float: kiri;
}
#Div1 ul li img {
Lebar: 150px;
Tinggi: 150px;
}
JS: Kode
Salinan kode adalah sebagai berikut:
window.onload = function () {
var odiv = document.geteLementById ('div1');
var oul = odiv.getElementsbyTagname ('ul') [0];
var ali = oul.getElementsbyTagname ('li');
var timer = null;
var speed = 2; // Kontrol kecepatan dan arah gulir
oul.innerHtml = oul.innerHtml+oul.innerHtml;
oul.style.width = Ali [0] .offsetWidth*ali.length+'px';
timer = setInterval (Move, 30);
odiv.onmouseover = function () {// tikus di Tentatif
clearInterval (timer);
};
odiv.onmouseout = function () {// mouse out dan lanjutkan gulir
timer = setInterval (Move, 30);
}
document.geteLementsbyTagname ('a') [0] .Onclick = function () {
kecepatan = -2;
}
document.geteLementsbyTagname ('a') [1] .onClick = function () {
Kecepatan = 2;
}
function move () {// gambar gulir
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';
}
}
Bukankah efeknya sangat bagus?