Javascript 已创建旋转木马，但如果有多个旋转木马，则会出错。（包括小提琴）

这是小提琴

我想在一个页面上有多个旋转木马，但不想全部实现。我该怎么办

HTML:

--额外的--

如何让所有的li项目都变暗，而最左边的项目不变暗

---

非常感谢您的帮助。

您正在做这样的事情：

var itemWidth = $('.detail li').outerWidth() + 10;

$（'.detail li'）

将在类为

detail

的元素中查找所有

元素。您只需将搜索范围限制在相应的

.project

的子级，您可以通过使用以下命令向上搜索DOM以查找您的

.project

，然后返回：

---

类似地，

$（“.detail”）

变成了

$（this.nexist（“.project”）。find（“.detail”）

等等。

我从未使用过nexist。非常有趣，非常感谢您的帮助。第一行在第一行之前有最后一个li，因此您可以在开始时无限滑动。你会如何像你说的那样反复学习每门课？@汤姆：我不知道你的意思。

// Slider
$('.detail li:first').before($('.detail li:last'));

$('.next').click(function() {
    var itemWidth = $('.detail li').outerWidth() + 10;
    var leftIndent = parseInt($(".detail").css("left"), 10) - itemWidth;
    $('.detail').animate({
        'left': leftIndent
    }, 400, function() {
        $('.detail li:last').after($('.detail li:first'));
        $('.detail').css({
            'left': '-200px'
        });
    });
});

$('.prev').click(function() {
    var itemWidth = $('.detail li').outerWidth() + 10;
    var leftIndent = parseInt($('.detail').css('left'), 10) + itemWidth;
    $('.detail').animate({
        'left': leftIndent
    }, 400, function() {
        $('.detail li:first').before($('.detail li:last'));
        $('.detail').css({
            'left': '-200px'
        });
    });
});

var itemWidth = $('.detail li').outerWidth() + 10;

var itemWidth = $(this).closest('.project').find('.detail li').outerWidth() + 10;