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

pause on hover for simple jquery carousel

本文关键字：jquery 旋转木马 简单 悬停 暂停      更新时间：2023-09-26

我在这里设置了一个超级简单的功能旋转木马示例:

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>

使用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();
});

似乎你有一个未关闭的脚本标签周围的第63行HTML -这可能是问题?

相关文章：