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

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()函数作为快捷方式:

工作演示

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

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