Question

我在这里建立了一个超级简单功能轮播的例子：

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

即使它有一个设定的宽度和高度，我甚至无法在悬停在包含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();
});

Answer 2

好像你的HTML第63行附近有一个未公开的脚本标记 - 这可能是个问题吗？

暂停悬停在简单的jquery旋转木马上

2 个答案: