setinterval() et la fonction clearinterval() - lorsque cette option est désactivée, ne s'anime pas automatiquement

Donc je suis en train de construire une animation image d'arrière-plan qui va parcourir un tableau d'images.

L'idée est également que lorsque vous cliquez sur un élément de navigation sur la page, le cycle se mettra en pause.

Lorsque vous cliquez sur le bouton d'accueil, le cycle recommence (à partir de l'image courante).

Cela fonctionne dans son état actuel, cependant, le cycle n'est pas automatique lors de la re-cuisson, au contraire, vous devez appuyer sur le bouton home pour chaque fondu/slide/whatever.

Le script est comme suit:

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

Si quelqu'un pourrait s'il vous plaît me diriger dans la bonne direction avec cela, ce serait grandement apprécié! Meilleures salutations, Kasper.

OriginalL'auteur Kasper Lewau | 2012-05-04