Halaman web apa pun yang Anda buka pada dasarnya akan melihat gulir yang mulus atau gambar korsel, seperti Taobao dan 360 Situs Web Resmi
Dengan mengamati gambar korsel ini, Anda dapat menemukan bahwa gambar dapat dialihkan bolak -balik, jadi bagaimana Anda melakukannya?
Ada dua cara utama untuk mencapai gulungan korsel atau mulus. Salah satunya adalah menampilkan atau menyembunyikan gambar dengan mengubah terang dan kegelapan gambar, yaitu, gambar transparan, dan yang lainnya adalah menampilkan gambar di area yang terlihat melalui bingkai bergerak. Kedua metode akan menggunakan hal yang sama, yaitu pengatur waktu.
Ada dua jenis timer dalam JavaScript, 1.setInterval (); 2.settimeout (); Ada juga dua metode untuk penutupan pengatur waktu, ClearInterVal () dan ClearTimeout (). Perbedaan antara kedua penghitung waktu adalah bahwa yang pertama dapat dieksekusi beberapa kali, sedangkan yang terakhir hanya dapat dieksekusi sekali.
Kali ini saya hanya akan berbicara tentang pengguliran yang mulus, dan artikel berikutnya memperkenalkan gambar korsel.
Kode untuk mengimplementasikan pengguliran mulus sederhana adalah sebagai berikut:
/*Kode Lengkap* /<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <tyle> div {position: relatif; lebar: 630px; tinggi: 220px; Border: solid 2px hitam; overflow: tersembunyi;} ul {position: absolute; atas: 10px; kiri: 0;} img {lebar: 200px; tinggi: 200px; float: kiri; margin-kanan: 10px; border: 2px padat yellow;} li {List-style: none; margin: 0; padding: 0;} ul {margin: 0; padding: 0;} </style> <script> window.onload = function () {var oul = document.getElementById ("main"); var ali = oul.geteLementsbyTagn ("imbas); oinput = document.getElementsbyTagname ("input") [0]; oul.innerHtml+= oul.innerHtml; oul.style.width = ali.length*ali [0] .offsetWidth+"px"; var timer = null; setInterval (function () {oul.style.left = oul.offsetleft-8+"px"; if (oul.offsetleft <-oul.offsetwidth/2) {oul.style.left = "0px";}}, 30);}; </script = "0px";}, 30);}; </script = "0px";}, 30);}; </script> </0px ";}, 30);}; </script =" 0px ";}, 30);}; </script =" 0px ";}, 30);}; </script =" 0px ";}, 30);}; </script =" 0px ";}, 30);}; </script> id="main"><li><img src="../img/1.jpg"></li><li><img src="../img/2.jpg"></li><li><img src="../img/2.jpg"></li><li><img src="../img/3.jpg"></li><li><img src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </div> </div> </body> </htm>/-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/
Tata letak gulir yang mulus relatif sederhana. Berikut ini terutama menjelaskan konten JS:
Pertama, dapatkan UL dan LI masing -masing, lalu salin konten dalam UL, ubah secara dinamis lebar UL melalui JS (jika Anda ingin menggulir ke atas dan ke bawah dengan mulus, memodifikasi lebarnya), dan akhirnya nyalakan timer. Dalam kode tersebut, UL memindahkan 8 piksel ke kiri setiap 30 mikrodetik, dan ketika margin kiri UL yang terlihat kurang dari setengah dari total panjang UL, ia menjadi 0. Karena komputer berjalan sangat cepat, perubahan ini hampir tidak mungkin dirasakan. Yang kita lihat hanyalah gambar yang terus -menerus bergerak ke kiri, gerakan tanpa akhir.
Di atas adalah kode JS pengguliran mulus yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!