创建了一个旋转木马，但如果有多个旋转木马就会出错.(包括小提琴)

Created a carousel but errors if there is more than one. (fiddle included)

本文关键字：旋转木马 出错 包括 小提琴 一个 创建 如果      更新时间：2023-09-26

这是小提琴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'
        });
    });
});

—Extra—

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

非常感谢你的帮助。

你在做这样的事情:

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

$('.detail li')将在具有detail类的元素中找到所有<li>元素。您所需要做的就是将搜索限制到适当的.project的子节点，您可以通过使用closest在DOM中查找.project并使用find:

来实现这一点。
var itemWidth = $(this).closest('.project').find('.detail li').outerWidth() + 10;

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

相关文章：