prinsip:
1. Berikan UL posisi absolut untuk membuatnya terpisah dari aliran dokumen, diatur ke kiri ke 0, memasukkan gambar ke dalam ul, tulis fungsi "bergerak", fungsi fungsi dapat membuat kiri UL berjalan ke kanan pada kecepatan positif,
2. Atur timer untuk membuat fungsi "bergerak" dijalankan setiap 30 milidetik (parameter variabel)
3. Karena panjang UL akan "dijalankan", kandungan ul, yaitu IMG, dapat digandakan.
oul.innerhtml += oul.innerHtml;
4. Pada saat ini, karena kandungan UL meningkat, lebarnya juga akan meningkat, dan jumlah gambar yang ditampilkan dapat berubah atau tidak pasti sesuai dengan proyek yang sebenarnya.
oul.style.width = oli.length*oli [0] .offsetWidth+'px';
5. Tambahkan kode ke fungsi "bergerak".
5.1 Saat ini, UL bergerak ke kanan. Ketika UL's offsetleft> 0, tarik UL ke kiri "setengah lebar ul", yaitu, memungkinkan UL untuk bergerak ke kanan tanpa batas.
if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px';}5.2 Ketika UL bergerak ke kiri dan offsetleft -nya menjalankan setengah dari lebar UL, tarik seluruh UL kembali ke kiri awal: 0;
if (oul.offsetleft <-oul.offsetWidth/2) {oul.style.left = 0; }Pada kode:
html:
<Div id = "box"> <ul> <li> <a href = "#"> <img src = "1.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2.jpg"/> </a> </li> <li> <Li> <a href = "#" /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> </div>
CSS:
* {margin: 0; padding: 0;} #box {width: 480px; Tinggi: 110px; Perbatasan: 1px Red Solid; Margin: 100px Auto; meluap: tersembunyi; Posisi: kerabat; } #box ul {position: absolute; Kiri: 0; atas: 5px;} #box ul li {List-style: none; float: kiri; Lebar: 100px; Tinggi: 100px; Padding-left: 16px; } #box ul li img {width: 100px; Tinggi: 100px;}JS:
<script> window.onload = function () {var odiv = document.geteLementById ('div1'); var oul = odiv.getElementsbyTagname ('ul') [0]; var oli = oul.getElementsbyTagname ('li'); var aa = document.geteLementsbyTagname ('a'); var ispeed = 10; // Biarkan UL memiliki kecepatan untuk memindahkan oul.innerhtml += oul.innerhtml; oul.style.width = oli.length*oli [0] .offsetWidth+'px'; aa [0] .onClick = function () {isPeed = -10; }; aa [1] .onClick = function () {isPeed = 10; }; fungsi fnmove () {if (oul.offsetleft <-oul.offsetWidth/2) {// Angka negatif adalah karena kiri UL adalah angka negatif oul.style.left = 0; } else if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // seluruh UL bergerak ke kanan}; var timer = null; clearInterval (timer); timer = setInterval (fnmove, 30); oul.onMouseOver = function () {clearInterval (timer); }; oul.onmouseout = function () {timer = setInterval (fnmove, 30); // Jalankan timer ini saat mouse dipindahkan}; }; </script>Jika ada kesalahan, harap perbaiki.
Kode implementasi sederhana yang digulir dengan mulus di atas (disarankan) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.