Question

我有一个简单的jquery滑块，非常适合我的使用。只是链接图像，没有控件，拇指，没有，真的很简单！

当鼠标光标在它上面时，我正试图让它成为stoo，但我无法做到。谁能在这帮助我？

slider.js

function slideSwitch()
    {
        var $active = $('#slideshow a.active');
        if ( $active.length == 0 ) $active = $('#slideshow a:last');
        var $next =  $active.next().length ? $active.next()
        : $('#slideshow a:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function()
        {
            $active.removeClass('active last-active');
        });
}
$(function()
{
    setInterval( "slideSwitch()", 10000 );
});

slider.css

#slideshow { height: 300px; position: relative; width: 960px; }
#slideshow a { left: 0; opacity: 0.0; position: absolute; top: 0; z-index: 8; }
#slideshow a.active { opacity: 1.0; z-index:10; }
#slideshow a.last-active { z-index: 9; }

HTML

    <div id="slideshow">
        <a href="#" class="active"><img src="img/slideshow/slide1.png" alt="Engine - Development Solutions" /></a>
        <a href="#"><img src="img/slideshow/slide2.png" alt="Engine - Development Solutions" /></a>
        <a href="#"><img src="img/slideshow/slide3.png" alt="Engine - Development Solutions" /></a>
    </div>

谢谢！

Answer 1

您需要清除mouseenter上的间隔，然后在mouseleave上再次启动滑块。您可以使用jQuery的hover()函数作为快捷方式：

Working Demo

$(function() {
    var interval = setInterval( slideSwitch, 10000 );

    $('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval( slideSwitch, 10000 );
    });
});

Answer 2

<强> DEMO

尝试这一点，在悬停时它会暂停，在鼠标离开时它将从暂停时间开始，而不是从开始时间开始

function slideSwitch()
    {
        var $active = $('#slideshow a.active');
        if ( $active.length == 0 ) $active = $('#slideshow a:last');
        var $next =  $active.next().length ? $active.next()
        : $('#slideshow a:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function()
        {
            $active.removeClass('active last-active');
        });
}


$(function()
{  var a;
    var  timer =  setInterval( "slideSwitch()",5000);
 $("#slideshow a img").hover(function(ev){
     a= 5000-timer;                      // finding the time lapsed
    clearInterval(timer);
}, function(ev){
    timer =  setInterval( "slideSwitch()",a);   // resume from the time paused
});

希望这有帮助，谢谢

在一个简单的jquery滑块上停止鼠标悬停

2 个答案: