Question

我正在尝试创建一个滑块，它会在转到下一个图像时向右移动。它还有一个功能，在它可以移动到特定的图像我使用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时，它会有一个名为“有效”的类，li的颜色会发生变化，表明它是当前选择的图像。问题是当滑块自动移动功能以指示哪个图像不起作用时。

这是滑块的移动方式

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

我试图这样做，但它只删除了“活跃”类，但它没有添加。对此有任何想法吗？

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添加活动类。不要给孩子李元素......你可以做到这一点;

$('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小提琴新代码：

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

在滑块上动态添加类

1 个答案: