jQuery是一個很強大的JavaScript庫,給JavaScript一個更加靈活的表現力,并且在針對對象,HTML文檔遍歷和處理,事件處理和動畫等方面提供了很多便利的接口和方法。
在jQuery中,可以很方便的通過使用循環來實現播放一個列表或者是圖片等等。以下是一個示例的代碼:
$(document).ready(function(){ var currentIndex = 0; var items = $('.slideshow>li'); var itemAmt = items.length; function cycleItems(){ var item = $('.slideshow>li').eq(currentIndex); items.hide(); item.css('display', 'inline-block'); } var autoSlide = setInterval(function(){ currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }, 3000); $('.next').click(function() { clearInterval(autoSlide); currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }); $('.prev').click(function() { clearInterval(autoSlide); currentIndex -= 1; if (currentIndex < 0) { currentIndex = itemAmt - 1; } cycleItems(); }); });
在這個示例中,我們定義了一個變量currentIndex,代表當前播放的元素,也就是當前的序號。有了這個變量,我們就可以很方便的控制播放的流程。
接著我們定義了一個數組items,它包含了所有需要播放的元素,即圖片的地址,也可以是需要播放的動畫等等。同時我們定義了一個變量itemAmt,代表了元素的總數。
接著我們定義了一個函數cycleItems,它包含了一個變量item,代表了我們需要播放的元素。這個函數中,我們首先隱藏其他元素,然后再顯示需要播放的元素,也就是讓當前元素展示出來。
接著我們定義了一個autoSlide,它是一個定時器,每隔一定的時間就會將currentIndex加1,等于達到了循環播放的效果。同時在autoSlide中,我們通過循環調用cycleItems函數,來控制每一個元素的播放過程。同時我們也可以通過點擊按鈕,來控制播放的進度,如向后播放,向前播放等等。
通過這樣的方式,我們就可以很方便的在jQuery中實現一個循環播放的效果,而且通過簡單的修改代碼,我們也可以輕松地實現不同的播放效果,如淡入淡出等等。