jQuery輪播圖自動播放的實現方法如下:
<script> $(document).ready(function(){ var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = $(".mySlides"); for (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); // 每 2 秒切換一張圖片 } }); </script>
代碼解析:
- 變量slideIndex用于存儲當前展示的圖片編號,初始值為0。
- 定義showSlides()方法,用于切換展示的圖片。
- 獲取所有輪播圖的元素,并將它們的display屬性設置為"none",使它們都隱藏。
- slideIndex自增1,如果它大于輪播圖的數量,就重置為1,保證可以循環播放。
- 將當前圖片的display屬性設置為"block",以便展示。
- 使用setTimeout()方法,在每2秒鐘后調用showSlides()方法,實現自動播放。
以上就是使用jQuery輪播圖自動播放的實現方法,希望本文對您有所幫助!
上一篇jquery輸入框內容
下一篇css怎么做跳轉