javascript - 悬停时暂停以实现简单的 jquery 轮播

Question

我在这里设置了一个 super 简单的功能轮播示例:

http://codepen.io/anon/full/myvAz

问题是，我无法让轮播在悬停时停止旋转。

即使它具有设定的宽度和高度，我什至无法在将鼠标悬停在包含的 div 上时收到触发警报。 但是，如果我将悬停部分粘贴到控制台中，我可以收到触发警报。

与其他代码结合使用时，它似乎不会触发。

如有任何帮助，我们将不胜感激

谢谢

代码如下:

<script>
// Main image carousel
$(document).ready(function(){
$("#headerMrS > div:gt(0)").hide();

var carouDiv = function(){
    setInterval(function() { 
      $('#headerMrS > div:first')
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo('#headerMrS');
    },  2000);
};

$(carouDiv());//Initialise the carousel function

$("#headerMrS").hover(function(){//Stop the carousel on hover
 $(this).stop;
  },function(){
  $(this).resume;
});


//Direction Arrow links
$(".button-sales").click(function(){
    $(".header").fadeOut(800);
    $(".sales").animate({opacity:"show"},800);
});
$(".button-modern").click(function(){
    $(".header").fadeOut(800);
    $(".modern").animate({opacity:"show"},800);
});
$(".button-antique").click(function(){
    $(".header").fadeOut(800);
    $(".antique").animate({opacity:"show"},800);
});
});

<style>

#headerMrS {position:relative; height:150px; width:350px}
.header {position:absolute; top:0; left:0}
</style>

<div id="headerMrS">
<div class="header sales active">
    <div class="header-content">
        <img src="http://placehold.it/350x150/4787ed/ffffff" alt="" />
        <div class="button-next button-antique">next</div>
        <div class="button-prev button-modern">prev</div>
    </div>
</div>
<div class="header antique">
    <div class="header-content">
        <img src="http://placehold.it/350x150/fc8a41/ffffff" alt="" />

        <div class="button-next button-modern">next</div>
        <div class="button-prev button-sales">prev</div>
    </div>
</div>
<div class="header modern">
    <div class="header-content">
        <img src="http://placehold.it/350x150/e7376b/ffffff" alt="" />

        <div class="button-next button-sales">next</div>
        <div class="button-prev button-antique">prev</div>
    </div>
</div>

Answer 1

使用clearInterval()怎么样？

不要简单地调用 setInterval()，而是将 setInterval() 函数分配给一个变量，下面我使用 carouselInt。这是调用 clearInterval() 所必需的。 要停止间隔，您可以调用 clearInterval(carouselInt)

根据我刚刚读到的内容，stop() 将停止当前动画，但每 2 秒就会有一个新动画。它对导致动画触发的 setInterval 没有明显影响。

您可以尝试以下操作。

var carouselInt = '';

var carouDiv = function(){
    carouselInt = setInterval(function() { 
      $('#headerMrS > div:first')
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo('#headerMrS');
    },  2000);
};

$(carouDiv());//Initialise the carousel function

$("#headerMrS").hover(function(){//Stop the carousel on hover
 clearInterval(carouselInt);
  },function(){
  carouDiv();
});