一个简单的jQuery滑块，如何在鼠标悬停时停止滑动？

Question

我有一个非常简单的jQuery幻灯片，它非常适合我的使用。只是链接图片，没有控件、缩略图，真的很简单！

我想让它在鼠标光标悬停在上面时停止滑动，但我无法实现。有人能帮我吗？

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>

谢谢！

- kaue-porte

---

欢迎来到 Stack Overflow。您能描述一下当您无法做到时发生了什么吗？ - Anthony Neace

Answer 1

您需要在鼠标进入时清除间隔，然后在鼠标离开时重新启动滑块。您可以使用jQuery的hover()函数作为快捷方式：

工作演示

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

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

- cfs

---

@KauêPorte 太好了！很高兴能帮到你！既然这个回答解决了你的问题，你可以将其标记为已接受吗？这将有助于有类似问题的人找到正确的答案。谢谢并祝你好运！ - cfs

Answer 2

演示

试试这个，在悬停时它会暂停，当鼠标离开时它将从暂停的时间开始，而不是从开始处开始。

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

希望这有所帮助，谢谢。

- SarathSprakash

---

非常顺利！太棒了！非常感谢你！ - kold-kreator

有一件事，在打开页面后的几分钟内，滑块开始表现出奇怪的行为，图像闪烁，变化过快，成为完全混乱。有什么原因吗？o.O - kold-kreator