Question

我有一个滑块，我想自动滑动。

setInterval(function() {
    $('.navigation li').trigger('click');
}, 100);

此代码移动，但点击总是在第一个li项目上执行，因此第三个幻灯片永远不会显示。如何让它点击所有这些并自动重新开始，让我们说“循环”？

选中此链接以查看滑块在此代码中的行为......

http://goo.gl/MX6WjD

Answer 1

尝试使用选择器li循环遍历所有eq()，其中索引已达到li的长度：

$(function(){
    setTimeout(function(){

        var slide_count = $('.navigation li').length;
        var cpt=0;

        setInterval(function() 
        {
            if( cpt < slide_count )
            {
                $('.navigation li:eq('+cpt+')').click();

                cpt++;
            }else{
                cpt=0;
            }
        }, 2000);

    }, 1000);

});

Live Example （每2秒循环播放一次）。

希望这有帮助。

Answer 2

您实际上需要使用setTimeout()而不是setInterval()，因为setInterval()会在运行后设置另一个超时，这会在等待期间造成不一致。 setTimeout()代码在定义的确切时间段内执行。

以下代码会在定义的确切时间段内对每个li发起一次点击。此处超时设置为4秒，但您可以根据需要进行设置。

<ul class="navigation">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<script>
$().ready(function(){
var totalEle = $('.navigation li').length;
var currentElement = 0;
var transitionTime = 4000; // 4 sec

function Transition()
{
    setTimeout(function() {    
    alert("Image " + $('.navigation li').eq(currentElement).text() + " was clicked");   
    currentElement < (totalEle - 1) ? currentElement++ : currentElement = 0;
           Transition();        
    }, transitionTime); 
}

Transition(); 
});
   </script>

工作示例：http://jsfiddle.net/rLanzn2w/17/

滑块li项目依次单击

2 个答案: