jQuery Banner是一種基于jQuery庫開發(fā)的網(wǎng)頁滑動輪播圖,用于在網(wǎng)站上展示圖片,文字或其他內容。有些網(wǎng)站使用的是原生的jQuery Banner,這意味著開發(fā)者在不依賴第三方擴展的情況下,完全使用jQuery庫的功能實現(xiàn)了輪播圖功能。以下是一個簡單的原生jQuery Banner代碼示例:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ var slideIndex = 0; showSlides(); function showSlides() { var slides = document.getElementsByClassName("mySlides"); for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // Change image every 2 seconds } }); </script> <div class="slideshow-container"> <div class="mySlides"><img src="image1.jpg"></div> <div class="mySlides"><img src="image2.jpg"></div> <div class="mySlides"><img src="image3.jpg"></div> </div>
在這個例子中,我們定義了一個名為 "mySlides" 的class,其包含每個幻燈片的圖片。然后,我們使用jQuery在DOM完成加載后開始展示圖片,并定期切換圖片。使用原生jQuery代碼能夠充分體現(xiàn)代碼的簡潔性和清晰度,同時也便于維護。