Question

我正在尝试将鼠标悬停添加到我的旋转木马上。我对脚本编程比较陌生，所以我无法让停顿工作正常。我正在寻找一些关于我做错的反馈和任何有用的建议。以下是我到目前为止的情况：

<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');
}
);
});

Answer 1

试试这个：

 $('.slideContainer').hover(
      function() {
        nextSlideTimer = setInterval(nextSlide, 3000);
      },
      function() {
        clearInterval( nextSliderTimer) ;
      }
);

在悬停时添加暂停到轮播

1 个答案: