jQuery滑块mouseenter停止/ ouseaveave启动

Question

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 -->

Answer 1

取出动画代码，并将其粘贴到$（“ .slider01”）.mouseover（）{}代码中。

Answer 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 --> 

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