Demo kecil ini terutama menggunakan kotak untuk memperbaiki panjang dan lebar untuk menampilkan gambar. Masukkan gambar ke dalam ImageBox dan hubungkan. Setiap kali Anda mengubah gambar, margin-kiri atribut gaya ImageBox dapat diubah untuk membentuk efek korsel.
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 = utf-8" />
<title> unt judul dokumen </iteme>
<tyle>
.box {
Lebar: 900px;
Tinggi: 350px;
margin: 20px;
meluap: tersembunyi;
margin: 0 otomatis;
}
.imageBox {
Lebar: 3600px;
Tinggi: 350px;
-webkit-transisi: Semua kemudahan 1;
-Moz-transisi: semua kemudahan 1-out;
-O-transisi: Semua kemudahan 1;
Transisi: Semua kemudahan 1;
}
.imageBox img {
Lebar: 900px;
float: kiri;
Tinggi: 350px;
}
</tyle>
</head>
<body>
<div>
<Div id = "ImageBox">
<img src = "gambar/gambar klik rotasi/gambar-53.jpg"/>
<img src = "gambar/gambar klik rotasi/gambar-54.jpg"/>
<img src = "gambar/gambar klik rotasi/gambar-55.jpg"/>
<img src = "gambar/gambar klik rotasi/gambar-56.jpg"/>
</div>
</div>
<div>
<input type = "tombol" value = "left" onClick = "turnleft ()"/>
<input type = "tombol" value = "right" onclick = "turnRight ()"/>
</div>
<bahasa skrip = "javascript">
var int = setInterval ("ubah ()", 3*1000);
var a = document.geteLementById ("ImageBox");
var i = 1;
function change () {
if (i == 4) {
i = 0;
}
i = i+1;
a.style.marginleft = (1-i)*900+"px";
}
function stopchange () {clearInterval (int);}
fungsi startchange () {int = setInterval ("ubah ()", 2*1000);}
a.onmouseover = function () {clearInterval (int);}
a.onmouseout = function () {int = setInterval ("ubah ()", 2*1000);}
fungsi turnleft () {
stopchange ();
i = i+1;
a.style.marginleft = (1-i)*900+"px";
if (i == 4) {
i = 0;
}
startchange ();
}
fungsi turnright () {
stopchange ();
if (i> 1) {
a.style.marginleft = (2-i)*900+"px";
i = i-1;
}kalau tidak{
a.style.marginleft = -3*900+"px";
i = 4;
}
startchange ();
}
</script>
</body>
</html>