javascript - 如何让 slider 在几秒钟后改变幻灯片？

Question

我有一种 slider ，其元素定义在标签下方，如下所示:

<div class="content-switcher" id="Content1">

我还有 Content2 和 Content3，在它们内部，我还有一些其他代码用于显示内容。然后在页面顶部我有这样的内容:

    <div class="progress-container">

        <a href="" class="item-number" onclick="selectStep(1); return false;">1</a>
        <a href="" class="item-number" onclick="selectStep(2); return false;">2</a>
        <a href="" class="item-number" onclick="selectStep(3); return false;">3</a>

            <div class="progress-selected"></div>

    </div>

我的 selectStep 函数定义如下:

    function selectStep(n){

    if(n==1){
        $(".progress-selected").animate({marginLeft: '5px'},300);
    }else if(n==2){
    $(".progress-selected").animate({marginLeft: '72px'},300);
    }else if (n==3){
    $(".progress-selected").animate({marginLeft: '132px'},300);
    }
    $(".content-switcher").hide();
    $("#Content"+n).fadeIn();
}

所以重点是，当我打开页面时，它显示 slider 的第一张幻灯片，这对我来说没问题，如果我单击编号它会更改幻灯片，但我想要在停留 3 秒后在第一张幻灯片中，我希望它自动移动到第二张幻灯片，然后第三张幻灯片，然后再次返回到第一张幻灯片，并永远这样继续。我想我需要使用 setTimeout 之类的东西，但不知道如何实现它。另请注意，它应该在加载时工作，我的意思是当页面加载时。有什么想法吗？

Answer 1

您将需要使用window.setInterval而不是setTimeout。类似的东西；

// set the variable which holds the number of steps/slides you have
var totalSteps = 3;
// set the current selected step, default is the first slide.
var selectedStep = 1; 
// assign this to a variable so you can use later
var myInterval = null;

var start = function(){

    myInterval = window.setInterval(function(){

        // increment the step
        selectedStep++;

        // check that we are not attempting to select a step that doesn't exist
        if ( selectedStep > totalSteps ){
            // reset back to 1
            selectedStep = 1;
        }

        // call the function with the selected step
        selectStep(selectedStep);

    }, 3000);        

};

当你想启动代码时，只需调用start();即可。

如果您想随时取消间隔，可以调用 window.clearInterval(myInterval);，然后稍后通过再次调用 start(); 重新启动它。

查看工作演示:jsbin