Javascript 在滑块上设置循环

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

---

问题是，到达终点时，需要将第一个图像设置为

$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）传递函数引用，如上面的示例所示

演示：
我想说。next（）让事情变得不必要的复杂。这个任务很容易用jQuery和一点数学来解决。在底部完成解决方案，一步一步地解释如下

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

逐步解释

你要做的是得到一个列表，迭代它，更改类，然后从头开始，对吗？一个技巧是使用
索引%length

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

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

然后，我们要找到活动元素及其索引。这是通过以下方式完成的：

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

然后是魔法。为了找到下一个数字，不管当前位置如何，我们取
$current
，加1，然后得到该数字的模数（基本上是剩余的）除以项目总数。
#slideshow
中的元素列表由
$list.children（）
返回

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

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

然后，只需使用
.get（index）
从当前元素中删除类并将其添加到下一个元素中，它允许我们通过它们的索引
查找（）
元素，并将它们包装到jQuery对象中，这样我们就可以使用
addClass（）
和
removeClass（）
，因为向后兼容

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

就这样

完整解决方案：

jsFiddle：

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

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

var图像显示=1；
var总计=7；
函数pic（）{
var image=document.getElementById（'picture'）；
ImageShowed=ImageShowed+x；
如果（ImageShowed>total）{ImageShowed=1；}
如果（ImageShowed<1）{ImageShowed=total；}
picture.src=“Images/img”+图像显示+“.jpg”；
}
窗口设置间隔（图，5000）；

您需要根据需要自定义变量以使脚本匹配。在此之前，需要将图片放入子文件夹img1、img2等名称的图像中。我知道这会起作用，因为我已经创建了一个自动运行的图像滑块
 小提琴上的照片没有出现。你能更新代码让滑块有图片可看吗？谢谢，这实际上是一个很好的选择
$($list.children().get($current)).removeClass("active")
$($list.children().get($next)).addClass("active");

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 );
});

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