Использование setInterval, чтобы приостановить слайд-шоу с JQuery? - PullRequest
Новая
       33

Использование setInterval, чтобы приостановить слайд-шоу с JQuery?

1 голос
/ 23 сентября 2019

Во-первых, я хотел бы сказать, что я очень плохо знаком с 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);
});

});

СпасибоВы заранее.

1 Ответ

1 голос
/ 23 сентября 2019

По сути, вы делаете вашу функцию «следующего слайда» многократно используемой, а затем используете ее всякий раз, когда вам нужно запустить слайд-шоу, будь то начальный запуск или позднее, когда вы перезапускаете.

Но помещаяразличные кусочки логики в дискретных, хорошо названных функциях могут помочь потоку кода легче и проще для чтения / поддержки, вот некоторые предложения (отмеченные ***): 

$(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();
});
...