javascript - 在 slider 上动态添加类

Question

我正在尝试创建一个 slider ，它会在转到下一张图片时向右移动。它还具有可以移动到特定图像的功能 我为此使用了 ul li html

$('#right, #left').on('click', function () {
    slide($(this).attr('id'), 600);
    $('ul#slide-menu').find('li.active').removeClass( 'active' );
    $('ul#slide-menu').addClass( 'active' );
});

当用户点击 li 时，它会有一个名为“active”的类 li 的颜色会改变，表明它是当前选择的图像。问题是当 slider 自动移动时，指示哪个图像的功能不起作用。

这是我的 slider 移动的方式

setInterval(function() {
    slide("right", 600);
}, 5000);

我试着这样做，但它只删除了“active”类，但没有添加。对此有什么想法吗？

setInterval(function() {
    slide("right", 600);
    $('ul#slide-menu').find('li.active').removeClass( 'active' );
    $('ul#slide-menu').addClass( 'active' );
}, 5000);

这是 jsFiddle .底部有一个 ul li，我试图让它也移动以指示正在显示的图像。

Answer 1

您正在向 ul#slide-menu 添加事件类。不是子 li 元素......你可以实现这样的;

$('ul#slide-menu').find('li:visible:first').addClass('active');

编辑:

var $slider = $('ul#slide-menu');
var $current = $slider.find('li.active');
var $next = $current.next();

if(!$next.length) {
    $next = $slider.find('li:first');
}

$current.removeClass('active');
$next.addClass('active');

JS Fiddle 新代码:

http://jsfiddle.net/Lb9xg/

function slider() {
    var $slider = $('ul#slide-menu');
    var $current = $slider.find('li.active');

    if(!$current.length) {
        var $next = $slider.find('li:first');
    } else {
        var $next = $current.next();
        $current.removeClass('active');
    }

    if(!$next.length) {
        $next = $slider.find('li:first');
    }

    $next.addClass('active'); 
}

$(function(){
    setInterval(function(){slider();}, 1000);
});