Question

我有一个滑块，当我鼠标悬停时会开始滑动，但我想在mouseout上停止滑动。下面是代码HTML，CSS和Jquery。请帮帮我

         `<div id="slider">
           <ul>
            <li>SLIDE 1</li>
             <li style="background: #aaa;">SLIDE 2</li>
               <li>SLIDE 3</li>
             <li style="background: #aaa;">SLIDE 4</li>
                </ul>  
            </div>`


        jQuery(document).ready(function ($) {

        $('#slider').mouseover(function(){
         setInterval(function () {
       moveRight();
       }, 3000);
       });

       jQuery("#slider").mouseout(function(){
         $("#slider ul").stop().animate();
          });

         var slideCount = $('#slider ul li').length;
         var slideWidth = $('#slider ul li').width();
          var slideHeight = $('#slider ul li').height();
          var sliderUlWidth = slideCount * slideWidth;

            $('#slider').css({ width: slideWidth, height: slideHeight });

            $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

            $('#slider ul li:last-child').prependTo('#slider ul');

            function moveLeft() {
           $('#slider ul').animate({
          left: + slideWidth
          }, 200, function () {
           $('#slider ul li:last-child').prependTo('#slider ul');
           $('#slider ul').css('left', '');
          });
          };

           function moveRight() {
            $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
          $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
       });
       };


        });    



        <style>
       html { border-top: 5px solid #fff; background: #58DDAF; color: #2a2a2a; }
        html,
        body { margin: 0; padding: 0; font-family: 'Open Sans'; }
        h1 { color: #fff; text-align: center; font-weight: 300; }
        #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto;                 
         border- radius: 4px; }
        #slider ul { position: relative; margin: 0; padding: 0; height: 200px; 
         list-style: none; }
       #slider ul li { position: relative; display: block; float: left; margin: 0; 
       padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; 
         line-height: 300px; }
       a.control_prev,
       a.control_next { position: absolute; top: 40%; z-index: 999; display: block; 
       padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; 
        text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; 
        cursor: pointer; }
        a.control_prev:hover,
        a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; }
        a.control_prev { border-radius: 0 2px 2px 0; }
        a.control_next { right: 0; border-radius: 2px 0 0 2px; }
         .slider_option { position: relative; margin: 10px auto; width: 160px;
        font-size: 18px; }
        </style>

这对我很有帮助:)）

提前谢谢

Answer 1

要停止动画，请存储间隔的计时器ID并在调用clearInterval时使用它：

http://jsfiddle.net/sk84k/2/（感谢the_Seppi发布了jsFiddle）

var timerId = 0;

$('#slider').mouseenter(function(){
    timerId = setInterval(function () {
        moveRight();
    }, 3000);
});

jQuery("#slider").mouseout(function(){
    clearInterval(timerId);
});

请注意，我也已从mouseover更改为mouseenter。

在Mouseout上停止滑块（Jquery）

1 个答案: