Dalam artikel ini, kami menyadari efek iklan bergulir dalam mode JS murni untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Mari kita tunjukkan produk jadi terlebih dahulu:
Pertama -tama, gaya halaman web:
#demo {latar belakang: #fff; meluap: tersembunyi; Perbatasan: 1px putus #CCC; Lebar: 1280px; Tinggi: 200px; } #demo img {border: 3px solid #f2f2f2; } #indemo {float: left; Lebar: 800%; } #demo1 {float: left; } #demo2 {float: left; }Tata letaknya adalah sebagai berikut:
<Div id = "Demo"> <Div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "banner.jpg"/</a> <a href = "#" </div> div = "banner2.
Implementasi JS spesifik:
<script> var speed = 10; var tab = document.geteLementById ("demo"); var tab1 = document.geteLementById ("demo1"); var tab2 = document.geteLementById ("demo2"); tab2.innerhtml = tab1.innerhtml; fungsi fungsi Marquee () {if (tab2.offsetWidth-ab.scrollleft == 0) tab.scrollleft- = tab1.offsetWidthelse {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tabApa yang harus dicatat di sini adalah:
Scrollleft mewakili lebar halaman yang tersembunyi di sebelah kiri scrollbar ketika halaman menggunakan scrollbar untuk menggulir ke kanan.
OffsetWidth adalah lebar yang terlihat dari objek, yang membungkus bilah gulir dan sama dengan tepi, yang akan berubah dengan ukuran tampilan jendela.
Metode setInterval () dapat memanggil fungsi atau menghitung ekspresi sesuai dengan periode yang ditentukan (dalam milidetik). Metode setInterval () akan terus memanggil fungsi sampai clearInterval () dipanggil atau jendela ditutup.
Mudah dimengerti jika Anda memahami implementasi khusus ini.
Prinsip implementasi adalah sebagai berikut: Salin pertama salinan konten yang perlu digulir. Ketika konten yang ditampilkan oleh div di sebelah kanan adalah lebar yang sama dengan konten yang tersembunyi di bayangan kiri, konten yang tersembunyi di bayangan kiri wadah induk ditampilkan, sehingga konten yang tersembunyi di bayangan kiri ditampilkan dan konten yang tersembunyi di sebelah kanan dikembalikan. Jika konten di sisi kanan menampilkan lebih sedikit dari konten yang tersembunyi di sisi kiri, terus katakan bahwa wadah induk ingin pindah ke kiri untuk mencapai persembunyian. Satu hal yang perlu diperhatikan adalah bahwa karena dua gambar ditempatkan di sisi kiri pada saat yang sama, ketika sisi kanan setengah ditampilkan, bayangan yang tersembunyi di sisi kiri akan ditampilkan sepenuhnya. Karena konten yang ditampilkan di sisi kanan sama dengan konten di sisi kiri, efek gulir loop tercapai.
Gulir yang halus ini tercapai.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.