Question

这是我在这里的第一篇文章，但我多年来一直使用这个网站作为很好的参考。当我将鼠标悬停在幻灯片上时，我只是想让幻灯片暂停。代码如下。我尝试使用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');
        });
}

Answer 1

在你实施的方式中，我只能推荐一个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');
        });
}

这应该可以正常工作。

P.S。：您还可以在.stop()库中查找方法jQuery。这将向具有动画效果的对象发送停止请求。

Answer 2

这可能很丑，但这应该有用

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

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

当它悬停在它上面时暂停动画

2 个答案: