Question

我有一个幻灯片放映，不是按照想要的atm，

on mouseover，mouseenter pause - addClass（'current hover'），删除上一个（当前）
on mouseleave继续浏览div添加和删除类当前

var timer;

$("#slideshow > div:gt(0)").addClass('current');

$("#slideshow").mouseenter(function () {
    if (timer) {
        clearInterval(timer).addClass('hovered');
    }
}).mouseleave(function () {
    timer = setInterval(function () {
        $("#slideshow > div:first")
            .removeClass('current')
            .next()
            .addClass('current')
            .end()
            .appendTo("#slideshow");
    }, 2000);
}).mouseleave();

Answer 1

好吧，我不是像这里的人一样在JSRURU上使用stackoverflow，但根据我的理解，你应该实现这样的东西：实际上mouseover

可能更好

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({
        //add something here
    })
        .addClass('active')
        .animate({
        //add something here
    }, 1000, function () {
        $active.removeClass('active last-active');
    });
}
$(function () {
    var interval = setInterval(slideSwitch, 1000);

    $('#slideshow a').hover(function () {
        clearInterval(interval);
        $('.active').removeClass('active');
        $(this).addClass('active');


    }, function () {
        interval = setInterval(slideSwitch, 1000);
    });


});

演示： http://jsfiddle.net/pgov2h2k/

Jquery幻灯片通过div播放并在悬停时暂停

1 个答案: