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

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') 将查找具有 detail< 类的元素中的所有

元素/代码>。您需要做的就是将搜索限制在适当的 .project 的子级中，并且您可以通过使用 .project 来完成此操作="http://api.jquery.com/closest/" rel="nofollow">closest 并使用 find：

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

同样，$(".detail") 变为 $(this).closest('.project' ).find('.detail') 等等。