创建了一个轮播，但如果有多个轮播则会出错。 （包括小提琴）

Question

这是小提琴http://jsfiddle.net/rgbjoy/q9VGh/

我想在一个页面上有多个轮播，但不想全部影响它们。我该怎么做？

HTML：

<div class="project">
    <div class="prev">&nbsp;</div>
    <div class="next">&nbsp;</div>
    <ul class="detail">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

和jQuery：

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

- 额外 -

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

非常感谢您的帮助。

Answer 1

你正在做这样的事情：

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

$('.detail li')会在元素中找到<li>类的所有detail个元素。您所需要做的就是将搜索范围限制在相应.project的子项中，然后您可以通过使用closest上升DOM查找.project并使用{ {3}}：

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

同样，$(".detail")变为$(this).closest('.project').find('.detail')，依此类推。