0

Javascript を使用して一連のオブジェクトを回転するように設定します。マウスがその上に移動したときに回転を停止する必要があります。私はまだこれに慣れていません。解決策は非常に簡単だと思いますが、機能させることができません。すべてを if ステートメントに入れてみましたが、それはコードを完全に破壊するように見えます。それを行うためのメソッドもいくつか記述しようとしましたが、コードも壊れているようです。

これは、オブジェクトを回転させるだけの実際の JavaScript です。

$(window).load(function() { //start after HTML, images have loaded

var InfiniteRotator =
{

    init: function()
    {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;


        //interval between items (in milliseconds)
        var itemInterval = 5000;

        //cross-fade time (in milliseconds)
        var fadeTime = 2500;

        //count number of items
        var numberOfItems = $('.rotating-item').length;

        //set current item
        var currentItem = 0;

        //show first item
        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

        var infiniteLoop = setInterval(function(){
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if(currentItem == numberOfItems -1){
                currentItem = 0;
            }else{
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
};

InfiniteRotator.init();

});

Html が必要な場合は、単に言ってください。

4

1 に答える 1

0

設定したばかりのタイマーをクリアし、マウスを離したときに元に戻す必要があります。infiniteLoop定義の直後にこれを試してください：

$('.rotating-item').hover(function() {
    clearInterval(infiniteLoop);
}, function() {
    infiniteLoop = setInterval(function(){
        $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
        if (currentItem == numberOfItems - 1) {
            currentItem = 0;
        } else {
            currentItem++;
        }
        $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

    }, itemInterval);
}

コードの繰り返しを避けるために、その繰り返し関数を前に定義することもできますが、それは厳密には必要ではありません。

于 2013-09-09T09:40:25.127 に答える