0

これはここでの私の最初の投稿ですが、私はこのサイトを何年にもわたって素晴らしい参考資料として使用してきました。スライドショーにカーソルを合わせると、スライドショーを一時停止させようとしているだけです。コードは以下のとおりです。jqueryホバーを使用して停止しようとしましたが、成功しません。誰かアイデアはありますか？

$(function() {
    // create the image rotator
    setInterval("rotateImages()", 7000);
});

function rotateImages() {
   var oCurPhoto = $('#photoShow div.current');
   var oNxtPhoto = oCurPhoto.next();
   if (oNxtPhoto.length == 0)
      oNxtPhoto = $('#photoShow div:first');

    oCurPhoto.removeClass('current').addClass('previous');
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
        function() {
            oCurPhoto.removeClass('previous');
        });
}
4

2 に答える 2

0

醜いかもしれませんが、これはうまくいくはずです

$(function() {
    var myTimer = 0;
    myTimer = setInterval("rotateImages()", 7000);

    $('#photoShow').mouseover(function() {
            clearInterval(myTimer);
      }).mouseout(function(){
            myTimer = setInterval("rotateImages()", 7000);
      });
});
于 2013-02-05T20:01:29.957 に答える
0

あなたが実装している方法では、ローテーションのステータスを保存するための変数しかお勧めできません。

このような：

var canRotate = true;

$(function() {
    // create the image rotator
    setInterval("rotateImages()", 7000);
});

function rotateImages() {
   if(!canRotate) { return; }
   var oCurPhoto = $('#photoShow div.current');
   var oNxtPhoto = oCurPhoto.next();
   if (oNxtPhoto.length == 0)
      oNxtPhoto = $('#photoShow div:first');

    oCurPhoto.removeClass('current').addClass('previous');
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
        function() {
            oCurPhoto.removeClass('previous');
        });
}

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

PS:ライブラリでメソッド.stop()を探すこともできます。jQueryこれにより、現在アニメーション化されているオブジェクトに停止要求が送信されます。

于 2013-02-05T19:54:49.440 に答える