jQuery：每隔5秒，自动点击一个列表中的下一个图像？ [英] jQuery: Every 5 seconds, automatically click on next image in a list?

问题描述

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

I have a given list of images, presented as thumbnails:

<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（我得到了来自另一个StackOverflow提问）：

I use jQuery so that, when the user clicks on an image, it replaces the featured image in a div (which I got from another StackOverflow Ask):

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

我的问题是：有没有办法让它成为幻灯片？也许每5秒自动点击下一张图片？ setInterval 是否参与其中？我试图对它真正基本，并避免使用比我更多的插件。 （但如果没有别的办法，我会考虑它..）

My question is: Is there a way to make it into a slideshow? Maybe automatically "click" on the next picture every 5 seconds? Does setInterval play a part in this? I'm trying to be really basic about it, and avoid using more plugins than I have to. (But if there is no other way, I will consider it..)

非常感谢任何帮助。

推荐答案

您可以轻松计算切换功能中的下一个图像。
这样你就不会弄乱你的var空间;）

You may easily calculate the next image within the switch function. This way you won't mess up your var space ;)

(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]);

这篇关于jQuery：每隔5秒，自动点击一个列表中的下一个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！