3

我正在开发一个简单的幻灯片系统。我将幻灯片包裹在一个隐藏的 div 中，当单击画廊中的缩略图时会显示该 div。

幻灯片通过一个名为 的函数工作，该函数commence()在单击播放按钮时执行。

目前我已经将它设置为div在单击停止时再次隐藏，但我想保持div显示，只需停止幻灯片，换句话说，停止该commence()功能。

谁能告诉我该怎么做？

这是我的 JS：

function commence() {
    hidden = document.getElementById("hidden");
    hidden.style.display = 'block';
    pause = document.getElementById("pause");
    pause.style.display = 'block';
    play = document.getElementById("play");
    play.style.display = 'none';
    pic = document.getElementById("picbox"); // Assign var pic to the html element.
    imgs = []; // Assign images as values and indexes to imgs array.

/* --------------------------- IMAGE URLS FOR IMGS ARRAY -------------------------*/

    imgs[0] = "/snakelane/assets/images/thumb/_1.jpg";  imgs[10] = "/snakelane/assets/images/thumb/_19.jpg"; 
    imgs[1] = "/snakelane/assets/images/thumb/_2.jpg";  imgs[11] = "/snakelane/assets/images/thumb/_20.jpg"; 
    imgs[2] = "/snakelane/assets/images/thumb/_3.jpg";  imgs[12] = "/snakelane/assets/images/thumb/_21.jpg";
    imgs[3] = "/snakelane/assets/images/thumb/_4.jpg";  imgs[13] = "/snakelane/assets/images/thumb/_22.jpg";
    imgs[4] = "/snakelane/assets/images/thumb/_5.jpg";  imgs[14] = "/snakelane/assets/images/thumb/_23.jpg";    
    imgs[5] = "/snakelane/assets/images/thumb/_6.jpg";  imgs[15] = "/snakelane/assets/images/thumb/_24.jpg";
    imgs[6] = "/snakelane/assets/images/thumb/_7.jpg";  imgs[16] = "/snakelane/assets/images/thumb/_25.jpg";
    imgs[7] = "/snakelane/assets/images/thumb/_8.jpg";  imgs[17] = "/snakelane/assets/images/thumb/_26.jpg"; 
    imgs[8] = "/snakelane/assets/images/thumb/_9.jpg";  imgs[18] = "/snakelane/assets/images/thumb/_27.jpg";
    imgs[9] = "/snakelane/assets/images/thumb/_10.jpg"; imgs[19] = "/snakelane/assets/images/thumb/_28.jpg"; 


/* -----------------------------------------------------------------------------------------------------*/


    var preload = []; // New array to hold the 'new' images.
    for(i = 0 ; i < imgs.length; i++) // Loop through imgs array
    {
        preload[i] = new Image(); // Loop preload array and declare current index as a new image object.
        preload[i].src = imgs[i]; // Fill preload array with the images being looped from ims array.
    }
    i = 0; // Reset counter to 0.
    rotate(); // Execute rotate function to create slideshow effect.
}

// Function to perform change between pictures.
function rotate() {
    pic.src = imgs[i]; // Change html element source to looping images
    (i === (imgs.length -1))?(i=0) : (i++); // counter equals imgs array length -1.
    setTimeout( rotate, 4000); // Sets the time between picture changes. (5000 milliseconds).
}


function init() {

    [].forEach.call(document.querySelectorAll('.pic'), function(el) { 
        el.addEventListener('click', changeSource); 
    });


    function changeSource() {  
        hidden = document.getElementById("hidden");
        hidden.style.display = 'block';
        newpic = this.src; 
        var pic = document.getElementById("picbox");
        pic.src = newpic;
    }
}

document.addEventListener("DOMContentLoaded", init, false);

function stopSlide() {
    var hidden = document.getElementById("hidden");
    hidden.style.visibility = 'hidden';
    pause.style.display = 'none';
    var play = document.getElementById("play");
    play.style.display = 'block';
}

pauseand语句与我的play问题无关，如果幻灯片正在运行，它们只是隐藏播放按钮并显示暂停按钮，反之亦然。

4

3 回答 3

5

在我看来，您实际上想要停止 rotate() 函数，而不是开始，因为旋转实际上是在更改图像（即运行幻灯片）。

有两种方法。第一个，就像发布的 thriqon 一样，是使用 clearTimeout 函数。但是我建议这样做：

// somewhere in global space
var rotateTimeout;

// in commence
rotateTimeout = window.setInterval(rotate,4000); // this will tell the browser to call rotate every 4 seconds, saving the ID of the interval into rotateTimeout

// in stopSlide
window.clearInterval(rotateTimeout); // this will tell the browser to clear, or stop running, the interval.

第二个有点混乱，是使用哨兵。

// somewhere in global space
var running;

// in commence
running = true;
rotate();

// in stopSlide
running = false;

// in rotate
if (running) {
    setTimeout(rotate,4000);
}
于 2013-08-08T23:11:41.973 回答
1

您想使用window.clearTimeout通过 call 获得的 id window.setTimeout。

但是您还应该考虑切换到window.setInterval，它每 4 秒（而不是最后一次调用后的 4 秒）给您一个函数调用，不需要重复调​​用来重新设置超时和更好地处理错过的事件。

请参阅此 jsFiddle： http: //jsfiddle.net/D3kMG/，以获取有关如何将这些函数用于简单计数器的示例。

于 2013-08-08T23:05:09.880 回答
0

As mentioned by @thriqon you will want to use window.clearTimeout. To do this you need to save a "global" reference to the id returned by window.setTimeout, as follows:

var timeoutID;

//... function declarations

function rotate() {
    //...
    timeoutID = setTimeout( rotate, 4000);
}

Then in your stopSlide function you'll simply call clearTimout( timeoutID ) to stop the rotation.

于 2013-08-08T23:13:49.420 回答