0

我在我的图片库幻灯片中添加了一个“播放”按钮，现在当我按下此按钮时，图片应该每 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 循环？谢谢。

4

5 回答 5

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 );
}
于 2013-10-17T10:48:51.380 回答
0

如果您需要能够播放/暂停循环，则需要使用 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

于 2013-10-17T10:53:25.970 回答
0

您也可以使用以下方法。

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

或者

setTimeout(function () { slide() }, 3000);
于 2013-10-17T10:43:50.323 回答
0

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

感谢你们！你们都帮了我很多！

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();
};
于 2013-10-17T11:06:06.677 回答
0

您必须在幻灯片函数中调用 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
    );
};
于 2013-10-17T10:49:39.270 回答