jquery - 悬停在动画上时暂停动画

Question

这是我在这里的第一篇文章，但多年来我一直使用这个网站作为一个很好的参考。当我将鼠标悬停在幻灯片上时，我只是想让幻灯片放映暂停。代码如下。我尝试使用 jquery hover 来停止它，但我没有任何成功。有人有想法么？

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

Answer 1

它可能很难看，但这应该可以

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

    $('#photoShow').mouseover(function() {
            clearInterval(myTimer);
      }).mouseout(function(){
            myTimer = setInterval("rotateImages()", 7000);
      });
});

Answer 2

在您实施的方式中，我只能推荐一个 var 来存储轮换的状态。

像这样：

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');
        });
}

这应该可以正常工作。

.stop()PS：您也可以在jQuery库中查找方法。这将向正在动画的对象发送停止请求。