Question

我在我的图片库幻灯片中添加了一个“播放”按钮，现在当我按下此按钮时，图片应该每3000毫秒更换一次。

我知道我需要在for循环中使用“setTimeout（）”，而我的var i将不会达到array_pics.lenght的值。但我不能让它发挥作用。

play.onclick = function play() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    //Tryed to put slide() function inside the for loop which was inside setTimeout(), get a syntax errors.
    var slide = function slide() {
        i = ind;
        ind += 1;
        index = ind;
        document.getElementById('largeImg').src = arr_big[ind].src;
    };

    slide(); //I have tryed setTimeout(slide(), 3000) here inside the for loop. Does not work!

};

有人可以帮助我让它发挥作用吗？我如何使用setTimeout（）和for循环？感谢。

Answer 1

如果你想重复一个动作，通常最好使用setInterval（）而不是setTimeout（），并在你希望它停止时使用clearInterval（）。我将从onclick处理程序中取出函数定义，并确保您的索引计数器是全局的而不是函数的本地。只是一些起点。

这就像......

var index = 0;
var timer = 0;
var maxNumOfImages = arr_big.length;

play.onclick = playMe; //changed the function name to avoid confusion between button and function
stop.onclick = stopMe;

function playMe() {
    document.getElementById('largeImg').src = arr_big[index].src;
     timer = setInterval( slide, 3000 );
}

function slide() {
    index += 1;
    if (index == maxNumOfImages) {
       index = 0;
    }
    document.getElementById('largeImg').src = arr_big[index].src;
 }

function stopMe() {
    clearInterval( timer );
}

Answer 2

您也可以使用以下方法。

setTimeout(function () { slide(); }, 3000);

OR

setTimeout(function () { slide() }, 3000);

Answer 3

您必须在滑动功能中调用setTimeout，每3秒重复一次。而且我认为您不需要为每个功能命名。

play.onclick = function() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    //Tryed to put slide() function inside the for loop which was inside setTimeout(), get a syntax errors.
    var slide = function() {
        i = ind;
        ind += 1;
        index = ind;
        document.getElementById('largeImg').src = arr_big[ind].src;

        setTimeout(slide, 3000);
    };

    slide();

};

编辑：您也可以使用setInterval：

play.onclick = function() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    setInterval(
        function() {
            i = ind;
            ind += 1;
            index = ind;
            document.getElementById('largeImg').src = arr_big[ind].src;
        },
        3000
    );
};

Answer 4

如果您需要能够播放/暂停循环，则需要使用setInterval。示例

(function() {
   var arr_big = [
    {src:"http://placehold.it/350x150"},
    {src:"http://placehold.it/350x250"},
    {src:"http://placehold.it/350x350"}    
   ];

 var iid, index;

function  slide () {        
   index = (index+1 == arr_big.length) ? 0 : index +1;
   document.getElementById('largeImg').src = arr_big[index].src;
}

playBtn.onclick = function () { 
   index = 0
   iid = setInterval(slide       , 500);
}
stopBtn.onclick = function() {
  clearInterval(iid)
}
})();

HTML

<button id="playBtn">play</button>
<button id="stopBtn">stop</button>
<p><img src="http://placehold.it/350x150" id="largeImg" /></p>

这是一个有效的jsfiddle

Answer 5

我解决了，这是我的代码。

谢谢你们，伙计们！你们都帮助了我很多！

play.onclick = function play() {
    document.getElementById('largeImg').src = arr_big[index].src;

    var slide = function slide() {
        if(index > arr_big.length-5) {
             index = 0;
         }
         index += 1;
         document.getElementById('largeImg').src = arr_big[index].src;
         setTimeout(slide, 1000);                           
     };
     slide();
};

如何使用setTimeout（），JavaScript

5 个答案: