3

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

当鼠标光标悬停在它上面时，我试图让它停下来，但我做不到。有人能帮我一下吗？

滑块.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 );
});

滑块.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>

谢谢！

4

2 回答 2

5

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

工作演示

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

    $('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval( slideSwitch, 10000 );
    });
});
于 2013-08-19T18:31:33.620 回答
1

演示

试试这个，悬停时它会暂停，鼠标离开时它会从暂停的时间开始，而不是从一开始

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

希望这有帮助，谢谢

于 2013-08-19T18:49:55.697 回答