jQuery滑块mouseenter停止/mouseleave开始 [英] jquery slider mouseenter stop/mouseleave start

问题描述

我希望此jquery滑块在mouseent输入时停止，在mousleave启动.

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

现在，它以fadingInOut滑动，速度为4秒，延迟为8秒.

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

代码在这里.

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

应用的HTML是这个.

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

推荐答案

将滑动功能保留在另一个名为 slide 的命名函数中，并在变量中添加捕获interval并清除它hover，然后在mouseout

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

这篇关于jQuery滑块mouseenter停止/mouseleave开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！