jquery slider mouseenter stop/mouseleave start

问题

I want this jquery slider stop when mouseenter, start when mousleave.

Now, it slides with fadeInOut, speed is 4sec, delay is 8sec.

The code is here.

<script>
$(function(){
    var $setElm = $('#slider_inner2'),
    fadeSpeed = 4000,
    switchDelay = 8000;

    $setElm.each(function(){
        var targetObj = $(this);
        var findUl = targetObj.find('ul');
        var findLi = targetObj.find('li');
        var findLiFirst = targetObj.find('li:first');

        findLi.css({display:'block',opacity:'0',zIndex:'99'});
        findLiFirst.css({display:'block',opacity:'1',zIndex:'100'});

        setInterval(function(){
            findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
        },switchDelay);
    });
});
</script>

applied HTML is this.

    <div id="slider2">
        <div id="slider_inner2">
            <ul>
                <li class="slider01"><img src="/img/top/slider.png1"></li>
                <li class="slider01"><img src="/img/top/slider.png2"></li>
                <li class="slider01"><img src="/img/top/slider.png3"></li>
            </ul>
        </div><!-- /#slider_inner -->
    </div><!-- /#slider -->

回答1:

Take out animate code and paste it to $( ".slider01" ).mouseover(){} code.

回答2:

You can clear the interval using clearInterval() when you mouseover and initialize the events again on mouseleave. Please check the snippet provided

$(function(){
  initSlider();
  $('#slider2').hover(function(){clearInterval(intMy);},initSlider);
});


function initSlider(){
    var $setElm = $('#slider_inner2'),
    fadeSpeed = 400,
    switchDelay = 800;

    $setElm.each(function(){
        var targetObj = $(this);
        var findUl = targetObj.find('ul');
        var findLi = targetObj.find('li');
        var findLiFirst = targetObj.find('li:first');

        findLi.css({display:'block',opacity:'0',zIndex:'99'});
        findLiFirst.css({display:'block',opacity:'1',zIndex:'100'});

        intMy = setInterval(function(){
            findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
        },switchDelay);
    });
}

ul{list-type:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="slider2">
        <div id="slider_inner2">
            <ul>
                <li class="slider01"><img src="http://media.digitalcameraworld.com/wp-content/uploads/sites/123/2014/01/Creative_photography_composition_tutorial_DCM147.shoot_core.BuachailleP603.jpg"></li>
                <li class="slider01"><img src="http://www.jssor.com/img/home/03.jpg"></li>
                <li class="slider01"><img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg"></li>
            </ul>
        </div><!-- /#slider_inner -->
    </div><!-- /#slider -->

回答3:

Keep your sliding functionality in a separate named function say slide and add a capture the interval in a variable and clear it on hover then call the slide function again on mouseout

DEMO

var $setElm = $('#slider_inner2'),
    fadeSpeed = 4000,
    switchDelay = 8000;
    var interval="";

function slide(){
        $setElm.each(function(){
        var targetObj = $(this);
        var findUl = targetObj.find('ul');
        var findLi = targetObj.find('li');
        var findLiFirst = targetObj.find('li:first');

        findLi.css({display:'block',opacity:'0',zIndex:'99'});
        findLiFirst.css({display:'block',opacity:'1',zIndex:'100'});
          interval = setInterval(function(){
            findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
       },switchDelay); //store in a variable to clear later

    });
}
$(function(){
    slide();
    $setElm.on('mouseover',function(){
       clearInterval(interval); //clear interval
    }).on('mouseleave',slide);
});

来源：https://stackoverflow.com/questions/32113069/jquery-slider-mouseenter-stop-mouseleave-start