jQuery：每 5 秒自动点击列表中的下一张图片？答案

【问题标题】：jQuery: Every 5 seconds, automatically click on next image in a list?jQuery：每 5 秒自动点击列表中的下一张图片？
【发布时间】：2012-03-04 17:38:47
【问题描述】：

我有一个给定的图像列表，显示为缩略图：

<ul id="thumbs">
    <li class="small-img"><img src="images/feature1.png" /></li>
    <li class="small-img"><img src="images/feature2.png" /></li>
    <li class="small-img"><img src="images/feature3.png" /></li>
</ul>

我使用 jQuery，因此，当用户单击图像时，它会替换 div 中的特色图像（我得到了 from another StackOverflow Ask）：

$('#thumbs img').click(function(){
    $('div.feature-photo img').hide().attr('src',$(this).attr('src')).fadeIn();
});

我的问题是：有没有办法把它做成幻灯片？也许每 5 秒自动“点击”下一张图片？ setInterval 是否参与其中？我正在尝试对其进行真正的基本操作，并避免使用比我必须使用的更多的插件。（不过如果没有别的办法，我会考虑的。。）

不胜感激。

【问题讨论】：

标签： jquery image gallery slideshow setinterval

【解决方案1】：

您可以在 switch 函数中轻松计算下一个图像。这样你就不会弄乱你的 var 空间；）

(function switchToImage(img) {
  $(img).click()
  var images = $('#thumbs img');
  var nextIndex = ($.inArray(images, img) + 1) % images.length;
  setTimeout(function() { 
    switchToImage(images[nextIndex]) 
  }, 5000);
})($('#thumbs img')[0]);

【讨论】：

我不太确定......函数的第一次（立即）执行会发生什么？ img 将是未定义的，不是吗？
是的，它会的，但这不是问题。 $(img).click() 将什么也不做，因为没有要单击的元素。 img 的索引将是-1，因此下一个索引将是0，并且程序将在 5 秒后切换到第一张图像。所以，是的，开始时有点滞后，因为第二张图片将在 10 秒后显示。但是您可以将 $('#thumbs img')[0] 作为参数添加到初始调用中。

【解决方案2】：

如果您愿意，可以使用纯 JQuery 方式。这是我的尝试

var intervalId;
$(function(){


function cycleImage(){

    var onLastLi = $("#thumbs li:last").hasClass("current");       
    var currentImage = $("#thumbs li.current img");
    var targetImage = $('div.feature-photo img');             
    $(targetImage).hide().attr('src', $(currentImage).attr('src')).fadeIn();

    var currentLi = $("#thumbs li.current");
    currentLi.removeClass("current");

    if(onLastLi){
        $("#thumbs li:first").addClass("current");
    }else{        
        currentLi.next().addClass("current");
    }

};

 intervalID = setInterval(cycleImage, 5000);



})

你可以在行动中找到它here

【讨论】：

【解决方案3】：

setInterval 可能是您问题的答案

var currImg = 0;
var $images;
$(document).ready(function() {
    $images = $('#thumbs img');
    changeImg();
    window.setInterval(function() {
        currImg++;
        if(currImg == $images.length) currImg = 0;
        changeImg();
    }, 5000);
});

function changeImg() {
    $('div.feature-photo img').hide().attr('src',$images.eq(currImg).attr('src')).fadeIn();
}

【讨论】：

【解决方案4】：

您需要考虑您的代码应该做什么，而不是用户做什么来触发您的代码。因此，您只希望代码自动显示下一张图片，而不是“自动‘点击’”。

所以第一步是将你的代码移出click处理程序：

function showImage(img){
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
}

$('#thumbs img').click(function() {
    showImage(this);
});

然后问题就变成了：如何使用“下一个”图像每五秒调用一次showImage。好吧，首先我们要记住“当前”图像是什么。很容易修改我们的showImage 来做到这一点：

var current = null;
function showImage(img){
    current = img;
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
}

那么我们只需要在 5 秒内触发即可。您可以使用setInterval，但我发现它很容易失控，因此我使用setTimeout 的一系列链接，每个都设置下一个。什么是一个很好的触发器？好吧，在用户点击图片五秒后，可能就在showImage：

var current = null;
var timer = 0;
function showImage(img){
    current = img;
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(nextImage, 5000);
}

好的，那么nextImage 应该是什么样子？我想说我们可能想使用current，也许：

function nextImage() {
    var $current;

    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }
    if (current) {
       $current = $(current);
       next = $current.nextAll("img")[0];
       if (!next) {
           $current.siblings("img")[0];
       }
       if (next) {
           showImage(next);
       }
    }
}

您可以通过显示第一张图片从一开始就开始：

showImage($("#thumbs img")[0]);

因此，将所有这些放在一起，并确保我们将其包装在一个作用域函数中，这样我们就不会创建全局符号：

(function() {
    var current = null;
    var timer = 0;

    function showImage(img){
        current = img;
        $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(nextImage, 5000);
    }

    function nextImage() {
        var $current;

        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
        if (current) {
           $current = $(current);
           next = $current.nextAll("img")[0];
           if (!next) {
               $current.siblings("img")[0];
           }
           if (next) {
               showImage(next);
           }
        }
    }

    $('#thumbs img').click(function() {
        showImage(this);
    });
    showImage($("#thumbs img")[0]);

})();

（或者，您可以使用 jQuery ready 来代替普通的作用域函数。）

以上内容相当粗略，完全未经测试，但你明白了。

【讨论】：

【解决方案5】：

你可以使用

setTimeout(function(){
    //trigger next picture}
,5000);

但你必须记住，如果用户重新加载页面，超时从零开始！

【讨论】：