Contoh -contoh dalam artikel ini berbagi dengan Anda efek JS untuk mencapai switching gambar untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Gunakan JS untuk mewujudkan efek mengklik tombol dan beralih gambar:
<Div id = "box"> <div id = "img_box"> <img src = "../ mentah/b1.jpg"> <img src = "../ mentah/b2.jpg"> <img src = "../ mentah/b3.jpg"> <mg src = "../ raw/b4.jpg"> </div "<" div "<" div "</div"> div "> </div" <"div" </div "</div"> </div "</div" <"div" ID = "Right"> </div> </div>
Struktur: Gunakan div lebar dan tinggi tetap untuk membuat wadah terluar, atur overflow ke tersembunyi,
Kemudian lapisan dalam IMG_BOX mengatur lebar hingga empat kali lebar kotak dan tingginya sama. Dengan kata lain, IMG_BOX berisi empat IMG, tetapi hanya satu yang terlihat. Dua Divs, kiri dan kanan di bawah bertindak sebagai tombol untuk mencapai klik untuk mengganti gambar. Beralih gambar berarti mengubah atribut kiri IMG_BOX, jadi IMG_BOX harus mengatur posisi ke absolute. Untuk kenyamanan, posisi kotak diatur ke relasi, jadi IMG_BOX diposisikan relatif ke kotak. Empat gambar mengatur float ke kiri, dengan lebar dan tinggi yang sama seperti kotak.
Kode CSS:
*{margin: 0; padding: 0;}. Box {width: 800px; Tinggi: 400px; Margin: 20px Auto; Posisi: kerabat; overflow: tersembunyi;}. img_box {height: 400px; Lebar: 3200px; Posisi: Absolute; -Moz-transisi: 0,5S; -webkit-transisi: 0.5s;} img {lebar: 800px; Tinggi: 400px; float: left;}. switch {width: 200px; Tinggi: 100%; Posisi: Absolute;}#kiri {kiri: 0px; Atas: 0px; Latar belakang: -Moz-linear-gradient (kiri, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0)); Latar Belakang: -WebKit-linear-gradient (kiri, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));}#kanan {kanan: 0px; Atas: 0px; Latar belakang: -Moz-linear-gradient (kiri, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5)); Latar Belakang: -WebKit-linear-gradient (kiri, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5));}#Kiri: Hover {latar belakang: -Moz-linear-gradient (kiri, rgba (0, 0, 0.5), RGBA (20%, 20%, 20%, 0));}#kanan: hover {latar belakang: -Moz-linear-gradient (kiri, rgba (0, 0, 0,0,5), rgba (20%, 20%, 0));} right: hover {latar belakang: -moz-lineir RGBA (0, 0, 0,0.5)); Latar Belakang: -WebKit-linear-gradient (kiri, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0.5));}Kiri dan kanan Gunakan warna latar belakang dan sifat gradien transparansi, hanya browser Firefox dan browser Webkit yang ditambahkan. Selain itu, beberapa browser IE adalah IE dan inti webkit ganda seperti 360 browser aman
Latar belakang: -Moz-linear-gradient (kiri, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Latar belakang: -WebKit-linear-gradient (kiri, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Untuk mencapai transisi yang lancar selama beralih, properti transisi ditambahkan:
-Moz-transisi: 0,5S;
-webkit-transisi: 0,5S;
Kode JS:
var box; var count = 1; window.onload = function () {box = document.geteLementById ("img_box"); var left = document.getElementById ("kiri"); var right = document.getElementById ("kanan"); left.addeventListener ("klik", _ kiri); right.addeventListener ("klik", _ kanan); document.body.addeventListener ("mouseover", demo);} function _right () {var dis = 0; if (count <4) {dis = count*800; } else {dis = 0; hitung = 0; } box.style.left = "-"+dis+"px"; hitung+= 1;} fungsi _left (event) {var dis = 0; if (count> 1) {dis = (2-count)*800; } else {dis = -3*800; hitung = 5; } box.style.left = dis+"px"; Count- = 1;}Gunakan jumlah variabel global untuk merekam gambar yang ditampilkan saat ini. Saat mengklik tombol sakelar, hitung gambar mana yang harus ditampilkan sesuai dengan jumlah, dan kemudian hitung dan atur atribut kiri IMG_BOX.
Di atas adalah kode untuk mengimplementasikan efek switching gambar oleh JS yang diperkenalkan kepada Anda. Saya harap ini dapat membantu Anda mencapai efek switching gambar.