jquery - 为 jquery localScroll 滑块添加自动播放功能

Question

我使用第25 行的教程制作了一个 jquery 图像滑块

我正在尝试为其添加自动播放功能，但我似乎根本找不到任何方法来做到这一点。我尝试添加一个 setInterval 函数以从此代码运行相同的 .click 函数

$(document).ready(function() {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("#slideshow-nav a[href=#slide1]").addClass("active");

$("#slideshow-nav").localScroll({
    target:'#slideshow', axis: 'x'
});

$("#slideshow-nav a").click(function(){
    $("#slideshow-nav a").removeClass("active");
    $(this).addClass("active");
});
});

但我不确定如何简单地将 1 添加到 li id (#slide1) 到 (#slide4)。

任何帮助将不胜感激。谢谢你。

Answer 1

window.slide = 1
function nextSlide(){
   parseInt($(".active").attr("href").replace(/#slide/g,"")) == 4 ? window.slide = 1 : window.slide = parseInt($(".active").attr("href").replace(/#slide/g,"")) + 1;
   $('#slideshow-nav a[href=#slide'+window.slide+']').click();
}
setInterval(nextSlide,8000);

以上假设有 4 张幻灯片。如果您有更多或更少，请更改数字 4. 每 8 秒更改一次幻灯片 (8000)