Question

我试图在滑块上设置一个循环，但它总是停在最后一个滑块上。请帮忙。

function slideSwitch() {
    var $active = $('div#slideshow .active');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Answer 1

问题是，当您到达终点时，需要将$next设置为第一张图片。您可以假设，如果没有$next元素，那么这意味着您需要从头开始。

例如：

function slideSwitch() {
    var $active = $('div#slideshow .active');
    var $next = $active.next();
    if (!$next.length) {
        $next = $('div#slideshow > :first');
    }
    $next.addClass('active');
    $active.removeClass('active');
}

$(function () {
    setInterval(slideSwitch, 1000);
});

不相关，但不是setInterval("slideSwitch()", 5000);传递函数引用，如上例所示。

演示： https://jsfiddle.net/na8zvhwh/2/

Answer 2

我会说.next（）让事情变得不必要复杂。这个任务很容易通过一些jQuery和一些数学来解决。完整的解决方案在底部，一步一步解释如下。

几乎只有slideSwitch的内部结构发生了变化。要求在一个元素上设置.active。我喜欢这个解决方案，因为它具有数学上的优雅，并且因为它一旦理解了它的概念就很容易使用，并且因为它使我们能够理解我们的工作而不是依赖于“正常工作”的东西。

逐步解释

你想要做的是获取一个列表，迭代它，更改类，然后从头开始，对吧？这方面的一个技巧是使用index % length。

几乎只有slideSwitch的内部结构发生了变化。要求在一个元素上设置.active。

首先，获取幻灯片列表:(缓存外部函数以获得更好的性能）

var $list = $("div#slideshow");

然后，我们想要找到活动元素及其索引。这完成了：

var $current = $list.find(".active").index();

然后神奇。要查找下一个数字，无论当前位置如何，我们取$current，然后加1，然后得到该数字的模数（基本上保留）除以项目总数。 #slideshow中的元素列表由$list.children()返回。

因此，当它到达终点时，它会神奇地环绕并重新开始。

var $next = ($current + 1) % $list.children().length;

然后，只需要从当前元素中删除类并将其添加到下一个元素，使用.get(index)允许我们通过索引将find()个元素包装起来并将它们包装在jQuery对象中我们可以使用addClass()和removeClass()，因为向后兼容性。

$($list.children().get($current)).removeClass("active")
$($list.children().get($next)).addClass("active");

就是这样。

完整解决方案：

jsFiddle：http://jsfiddle.net/thn1vnmg/

function slideSwitch() 
{
    // Cache this outside function for performance
    var $list = $("div#slideshow"),
        $current = $list.find(".active").index(),
        $next = ($current+1) % $list.children().length;

    $($list.children().get($current)).removeClass("active")
    $($list.children().get($next)).addClass("active");
}

$(function() {
    setInterval( slideSwitch, 1000 );
});

http://en.wikipedia.org/wiki/Modular_arithmetic

Answer 3

我使用的一个简单脚本就是这个。

var imageShown = 1;
var total = 7;

function pic() {
var image = document.getElementById('picture');
imageShown = imageShown + x;
if(imageShown > total){imageShown = 1;}
if(imageShown < 1){imageShown = total;} 
picture.src = "Images/img"+ imageShown +".jpg";
}
window.setInterval(pic, 5000);

您需要根据需要自定义变量以使脚本匹配。在此之前，图片需要放在名为img1，img2等的子文件夹Images中。我知道这会有效，因为我创建了一个自动运行的图像滑块。 Reset Javascript Timer for Image Slider

在滑块上设置循环

3 个答案: