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> <li> <a href = "#"> <img src = "4.jpg"/> </a> </li> </ul> </dv>
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'); // 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;}; function fnmove () {if (oul.offsetleft <-oul.offsetwidth/2) {// angka negatif adalah karena UL yang kiri adalah negatif bilangan negatif. 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 pengatur waktu ini saat mouse dipindahkan};}; </script>Di atas adalah ide-ide pengguliran dan kode mulus berbasis JS yang dibagikan oleh editor. Saya harap ini bisa membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda untuk situs web Wulin Network!