这是小提琴http://jsfiddle.net/rgbjoy/q9VGh/
我想在一个页面上有多个轮播,但不想影响他们所有。我该怎么做呢?
HTML:<div class="project">
<div class="prev"> </div>
<div class="next"> </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')
,依此类推。