0

我在这里设置了一个超级简单的功能轮播示例：

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>
4

2 回答 2

2

怎么用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();
});
于 2013-01-08T14:46:50.937 回答
0

似乎您在 HTML 的第 63 行附近有一个未关闭的脚本标签 - 这可能是问题吗？

于 2013-01-08T14:36:10.817 回答