的setInterval（）和clearinterval（） - 清除时，不会自动动画 [英] setinterval() and clearinterval() - when cleared, does not animate automatically

问题描述

所以我试图建立一个生动活泼的背景图像将通过图像阵列周期。

So I'm trying to build an animating background image which will cycle through an array of images.

这个想法也是，当你点击页面上的任何导航元素，周期将暂停。

The idea is also that when you click any navigation element on the page, the cycle will pause.

当你点击home键，周期重新启动（从当前图像）。

When you click on the home button, the cycle is to start up again (from the current image).

这工作在它的当前状态，但是周期是不是在自动重新发射它，而不是你有preSS为每个家庭按钮淡出/滑​​动/不管。

This works in it's current state, however the cycle is not automatic upon re-firing it, instead you have to press the home button for each fade/slide/whatever.

该脚本如下：

$(document).ready(function(){

    var imgArr = new Array(
        'img/slides/slide1.jpg',
        'img/slides/slide2.jpg',
        'img/slides/slide3.jpg');

    var preloadArr = new Array();
    var i;


    // Preload
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 1;
    var IntID = setInterval(startSlider, 4000);

    // Image Rotator

    function startSlider(){
        $('.mainbg').animate({opacity: 0}, 1200, "easeInOutExpo", function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src + ') no-repeat center center fixed');
            $(this).css({'background-size': 'cover' , '-webkit-background-size': 'cover' , '-moz-background-size': 'cover' , '-o-background-size': 'cover' ,});
            }).animate({opacity: 1}, 1200, "easeInOutExpo");
        }

    function stopSlider() {
        clearInterval(IntID);
    }

    $(".topnav ul li a").click(stopSlider);

    $("#home").click(startSlider);
});

如果有人能请点我在这个正确的方向，这将会是很大的AP preciated！最好的问候，卡斯帕。

If someone could please point me in the correct direction with this, it'd be greatly appreciated! Best regards, Kasper.

推荐答案

这应该为你做它。

var IntID = setTimer();

function setTimer(){
     i = setInterval(startSlider, 4000);
     return i;
}

function stopSlider() {
    clearInterval(IntID);
}

//Restart Timer
// Option 1 make a restartSlider function and call it
$("#home").click(restartSlider);
function restartSlider(){
      IntID = setTimer();
}

//Option 2 create an anonymous function only for that click event.
$("#home").click(function(){
     IntID = setTimer();
});

这篇关于的setInterval（）和clearinterval（） - 清除时，不会自动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！