在旋转木马上添加悬停暂停

Add a pause on hover to carousel

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

我正在尝试添加暂停悬停到我的旋转木马。我是相对较新的脚本编写，所以我还没有能够得到暂停工作正确。我正在寻找一些反馈我做错了什么和任何有用的建议。以下是目前为止的内容:

<div class="carouselContainer">
<div class="carouselTop">
    <div class="arrowLeft"><a href="#" id="left"><img src="img/left.png" style="position:absolute;"></a></div>
    <div class="imgWindow">
        <div class="slideContainer">
            <div class="slide"><a href="#"><img src="img/pic1"></a></div>
            <div class="slide"><a href="#"><img src="img/pic2"></a></div>
            <div class="slide"><a href="#"><img src="img/pic3"></a></div>
            <div class="slide"><a href="#"><img src="img/pic4></a></div>
        </div>
    </div>
    <div class="arrowRight"><a href="#" id="right"><img src="img/right.png" style="position:absolute;"></a></div>
</div>


$(document).ready(function(){
    $(".slideContainer > div:gt(0)").hide();
    var nextSlide = function() { 
        $(".slideContainer > div:first")
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo(".slideContainer");
    }
    var nextSlideTimer = setInterval(nextSlide,  3000);
    $(".arrowLeft").click(function() {
        clearInterval(nextSlideTimer);
        $(".slideContainer > div:first")
        .fadeOut(500);
        $(".slideContainer > div:last")
        .fadeIn(500)
        .prependTo(".slideContainer");
        nextSlideTimer = setInterval(nextSlide, 3000)
        setTimeout(nextSlideTimer, 3000)
    });
    $(".arrowRight").click(function() {
        clearInterval(nextSlideTimer);
        $(".slideContainer > div:first")
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo(".slideContainer");
        nextSlideTimer = setInterval(nextSlide, 3000)
        setTimeout(nextSlideTimer, 3000)
    });
    $('.slideContainer').hover(
function() {
    $(this).carousel('pause');
},
function() {
    $(this).carousel('cycle');
}
);
});

try this:

 $('.slideContainer').hover(
      function() {
        nextSlideTimer = setInterval(nextSlide, 3000);
      },
      function() {
        clearInterval( nextSliderTimer) ;
      }
);
相关文章：