3

だから私は、画像の配列を循環するアニメーション背景画像を構築しようとしています。

また、ページ上のナビゲーション要素をクリックすると、サイクルが一時停止するという考え方もあります。

ホームボタンをクリックすると、(現在の画像から) サイクルが再び開始されます。

これは現在の状態で機能しますが、サイクルは再起動時に自動ではなく、代わりにフェード/スライドなどごとにホームボタンを押す必要があります.

スクリプトは次のとおりです。

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

誰かがこれで正しい方向に私を向けることができれば、それは大歓迎です! よろしく、カスパー。

4

1 に答える 1

9

これでうまくいくはずです。

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();
});
于 2012-05-04T03:57:04.957 に答える