Javascript jquery在鼠标悬停时停止图像旋转，在鼠标悬停时开始

我已经构建了一个jQuery旋转器来旋转3个div并循环它们。我想在mouse-over上添加“冻结”当前div的功能，然后在mouse-out上重新开始

我曾想过在函数开始时将变量设置为false，在当前帧上设置为true，但我自己有点困惑

我也尝试过使用hover函数，但是当使用in和out处理程序时，我对如何停止、重新启动动画感到困惑

  function ImageRotate() {
 var CurrentFeature = "#container" + featureNumber;

 $(CurrentFeature).stop(false, true).delay(4500).animate({'top' : '330px'}, 3000);


 var featureNumber2 = featureNumber+1;
 if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
 var NewFeature = "#container" + featureNumber2;
 $(NewFeature).stop(false, true).delay(4500).animate({'top' : '0px'}, 3000); 

 var featureNumber3 = featureNumber-1;
 if ( featureNumber == 1) {featureNumber3 = numberOfFeatures};
 var OldFeature = "#container" + featureNumber3;
 $(OldFeature).stop(false, true).delay(4500).css('top' , '-330px'); 

 setTimeout('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; ImageRotate2()', 7500)};

任何帮助都将不胜感激！！

---

谢谢，Matt如果要添加此代码：

var timerId = null;
function startRotation() {
    if (timerId) {
        return;
    }
    timerId = setInterval('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; ImageRotate2()', 7500);
}
function stopRotation() {
    if (!timerId) {
        return;
    }
    clearInterval(timerId);
    timerId = null;
}

并用对

startRotation（）的简单调用替换代码块的最后一行

，然后当鼠标悬停在/离开元素时，可以调用

停止旋转

和

开始旋转

：

$('your-element-selector').hover(stopRotation, startRotation);

---

如果要添加此代码：

var timerId = null;
function startRotation() {
    if (timerId) {
        return;
    }
    timerId = setInterval('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; ImageRotate2()', 7500);
}
function stopRotation() {
    if (!timerId) {
        return;
    }
    clearInterval(timerId);
    timerId = null;
}

并用对

startRotation（）的简单调用替换代码块的最后一行

，然后当鼠标悬停在/离开元素时，可以调用

停止旋转

和

开始旋转

：

$('your-element-selector').hover(stopRotation, startRotation);

---

在没有看到HTML和更多代码的情况下，我们还不清楚如何处理这三个div，因此我认为一个基本示例可能会对您有更好的帮助（）

HTML

---

在没有看到HTML和更多代码的情况下，我们还不清楚如何处理这三个div，因此我认为一个基本示例可能会对您有更好的帮助（）

HTML

---

改变了一点，下面是我最终如何做到的`

 var animRun = false;
var rotateHover = false;

function startRotation() {

            rotateHover = false;
            ImageRotate();
        }

    function stopRotation() {
        rotateHover = true;
        clearTimeout();
    }

    function ImageRotate() {

    if (rotateHover == false){
    animRun = true;

    var CurrentFeature = "#container" + featureNumber;

    $(CurrentFeature).stop(false, true).animate({'top' : '330px'}, featureDuration, function(){animRun = false;});

    var featureNumber2 = featureNumber+1;
    if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
    var NewFeature = "#container" + featureNumber2;
    $(NewFeature).stop(false, true).animate({'top' : '0px'}, featureDuration); /* rotate slide 2 into main frame */

    var featureNumber3 = featureNumber-1;
    if ( featureNumber == 1) {featureNumber3 = numberOfFeatures};
    var OldFeature = "#container" + featureNumber3;
    $(OldFeature).stop(false, true).css('top' , '-330px'); /*bring slide 3 to the top*/

    //startRotation();

    setTimeout('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; if (rotateHover == false){ImageRotate2()};', featureDelay);
    };
};

---

改变了一点，下面是我最终如何做到的`

 var animRun = false;
var rotateHover = false;

function startRotation() {

            rotateHover = false;
            ImageRotate();
        }

    function stopRotation() {
        rotateHover = true;
        clearTimeout();
    }

    function ImageRotate() {

    if (rotateHover == false){
    animRun = true;

    var CurrentFeature = "#container" + featureNumber;

    $(CurrentFeature).stop(false, true).animate({'top' : '330px'}, featureDuration, function(){animRun = false;});

    var featureNumber2 = featureNumber+1;
    if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
    var NewFeature = "#container" + featureNumber2;
    $(NewFeature).stop(false, true).animate({'top' : '0px'}, featureDuration); /* rotate slide 2 into main frame */

    var featureNumber3 = featureNumber-1;
    if ( featureNumber == 1) {featureNumber3 = numberOfFeatures};
    var OldFeature = "#container" + featureNumber3;
    $(OldFeature).stop(false, true).css('top' , '-330px'); /*bring slide 3 to the top*/

    //startRotation();

    setTimeout('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; if (rotateHover == false){ImageRotate2()};', featureDelay);
    };
};

---

实际上，无论出于什么原因，如果你将鼠标悬停在它上面（它会正确停止）。。然后在鼠标离开时再次启动，但一旦下一张幻灯片进入，它将暂停，直到您再次将鼠标悬停在on和off位置。。通过将

setTimeout

更改为

setInterval

进行修复。我的道歉。事实上，无论出于什么原因，如果你把鼠标悬停在它上面（它会正确停止）。。然后在鼠标离开时再次启动，但一旦下一张幻灯片进入，它将暂停，直到您再次将鼠标悬停在on和off位置。。通过将

setTimeout

更改为

setInterval

进行修复。我道歉。