Question

这是我的代码

<body>
    <div id="slideshow">             
       <div>
           <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/>
       </div>
       <div>
           <img src="assets/images/banner1.jpg" width="995" height="421" alt=""/> 
       </div>
       <div>
           <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/> 
       </div>
       <div>
           <img src="assets/images/banner1.jpg" width="995" height="421" alt=""/> 
       </div>
       </div>
<script>
    $("#slideshow > div:gt(0)").hide();
       setInterval(function() { 
         $('#slideshow > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slideshow');
    },  3000);
</script>
</body>

Answer 1

请尝试以下jQuery并判断它是否正常工作？

$(document).ready(function() {

    var timer;

    $("#slideshow > div:gt(0)").hide();

    $("#slideshow")
        .mouseenter(function() {
            if (timer) { clearInterval(timer) }
        })
        .mouseleave(function() {
            timer = setInterval(function() {
                $("#slideshow > div:first")
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo("#slideshow");
            }, 2000);
        })
        .mouseleave();


});

方法setInterval（）返回一个intervalID，您可以使用clearInterval（）清除当前间隔/超时。这是一个有效的FIDDLE DEMO

Answer 2

首先用你的代码很难做到它应该重新格式化作为一个函数havig作为滑动图像的角色让我们假设该函数具有名称animate_slider（），以及在鼠标悬停时停止它你只需要像这样设置一个clearInterval on time参数：

node server.js

如何创建鼠标悬停时停止的图像滑块？

2 个答案: