暂停它的动画时

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 .:您也可以在jQuery库中查找方法.stop()。这会发送一个停止请求给正在动画的对象。

Answer 2

这也许丑陋但这应该工作

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

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