jquery 滑块 mouseenter 停止/mouseleave 开始答案

【问题标题】：jquery slider mouseenter stop/mouseleave startjquery 滑块 mouseenter 停止/mouseleave 开始
【发布时间】：2015-08-20 08:19:30
【问题描述】：

我希望这个 jquery 滑块在鼠标进入时停止，在鼠标离开时启动。

现在，它用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 -->

【问题讨论】：

标签： javascript jquery slider

【解决方案1】：

取出动画代码并将其粘贴到 $( ".slider01" ).mouseover(){} 代码中。

【讨论】：

【解决方案2】：

您可以在鼠标悬停时使用clearInterval() 清除间隔，并在鼠标离开时再次初始化事件。请检查提供的sn-p

$(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】：

将您的滑动功能保留在一个单独的命名函数中，例如 slide 并在变量中添加捕获 interval 并在 hover 上清除它，然后在 @987654325 上再次调用 slide 函数@

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

【讨论】：