jquery里的循环播放

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中实现一个循环播放的效果,而且通过简单的修改代码,我们也可以轻松地实现不同的播放效果,如淡入淡出等等。

jquery里的循环播放