Question

我希望这个jquery滑块在mouseenter时停止，在mousleave时启动。

现在，它以fadeInOut滑动，速度为4秒，延迟为8秒。

代码在这里。

<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就是这个。

    <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

取出动画代码并将其粘贴到$（＆＃34; .slider01＆＃34;）.mouseover（）{}代码。

Answer 2

您可以在鼠标悬停时使用clearInterval()清除间隔，并在mouseleave上再次初始化事件。请查看提供的代码段

＆＃13;

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

＆＃13;

ul{list-type:none;}

＆＃13;

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

＆＃13;

Answer 3

将您的滑动功能保存在单独的命名函数中，如幻灯片，并在变量中添加interval捕获并在hover上清除它，然后调用slide在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 slider mouseenter stop / mouseleave start

3 个答案: