首先,我們需要在html文件中引入jquery庫文件:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
接著,在需要顯示輪播圖的位置添加以下代碼:
<div id="carousel"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div>
這里我們用一個div包含了需要輪播的三張圖片,其中image1.jpg、image2.jpg和image3.jpg為實際圖片的路徑。
然后,在js文件中添加以下代碼:
$(function () { // 獲取div中的所有圖片元素 var imgs = $("#carousel img"); // 自動播放時間間隔(單位:毫秒) var interval = 2000; // 當前顯示的圖片索引 var current = 0; // 定時器ID var timerId; // 定義自動播放函數 function autoPlay () { // 隱藏上一張圖片 $(imgs[current]).fadeOut(); // 更新當前索引 current = (current + 1) % imgs.length; // 顯示下一張圖片 $(imgs[current]).fadeIn(); } // 啟動自動播放 timerId = setInterval(autoPlay, interval); });
在代碼中,我們首先獲取輪播圖的所有圖片元素,設置自動播放時間間隔、當前顯示的圖片索引和定時器ID。然后定義autoPlay函數用于實現自動播放功能,這里用到了jquery的fadeIn和fadeOut方法實現圖片漸顯漸隱效果。最后通過setInterval方法啟動自動播放。
到這里,我們已經成功地使用jquery實現了圖片自動播放功能。如果想要停止自動播放,可以使用以下代碼:
clearInterval(timerId);
這里我們使用clearInterval方法清除定時器。