使用 setInterval 暂停 JQuery 的幻灯片放映？

Question

首先，我想说我对 JS/JQuery 很陌生。

我正在尝试制作带有暂停和播放按钮的背景图片幻灯片。

我想出了如何使用 clearInterval 暂停它，但是我一辈子都想不出如何让它从暂停的地方再次恢复。我知道有几个线程与此有关，但我无法让它们与幻灯片放映一起工作。

代码如下：

$(document).ready(function(){
var count = 0;
var images = ["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];
var image = $(".fader");
var timer = false;


image.css("background-image","url("+images[3]+")");

var timer = setInterval(function(){
    image.fadeOut(500, function(){
        image.css("background-image","url("+images[count++]+")");
        image.fadeIn(500);
    });
    if(count==images.length){
        count = 0;
    }
},1000);

$("#pauseButton").click(function(){
    clearInterval(timer);
 });

 $("#startButton").click(function(){
     setInterval(timer);
});

});

提前致谢。

Answer 1

基本上，您可以使 "next slide" 函数可重复使用，然后在需要开始幻灯片放映时使用它，无论是初次开始还是稍后重新开始。

但是将各种逻辑位放在离散的、命名良好的函数中可以帮助代码更轻松地流动并且更简单 read/maintain，这里有一些建议（标记为 ***）：

$(document).ready(function() {
    var count = 0;
    var images = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];
    var image = $(".fader");
    var timer = 0; // *** Timer handles are numbers. `false` works, but...

    // *** Reusable function to target with `setInterval`
    function nextSlide() {
        image.fadeOut(500, function() {
            image.css("background-image", "url(" + images[count] + ")"); // *** Removed increment here, see below
            image.fadeIn(500);
        });
        count = (count + 1) % images.length; // *** Easy way to do roll-around
    }

    // *** Reusable "start" function
    function startSlideShow() {
        if (!timer) { // *** Don't try to start it if already running
            timer = setInterval(nextSlide, 1000);
        }
    }

    // *** Reusable "stop" function
    function stopSlideShow() {
        clearInterval(timer); // *** Safe to call with `0`, so no need to branch
        timer = 0;
    }

    // *** Stop when pause button clicked
    $("#pauseButton").click(stopSlideShow);

    // *** (Re)Start when pause button clicked
    $("#startButton").click(startSlideShow);

    // *** Start the slideshow automatically
    image.css("background-image", "url(" + images[3] + ")");
    startSlideShow();
});

使用 setInterval 暂停 JQuery 的幻灯片放映？

Using setInterval to pause a slideshow with JQuery?

jquery

setinterval

slideshow

clearinterval