我正在尝试创建类似旋转木马的东西,添加和删除元素特定类
<div class="advantages-slider">
<ul class="advantages-list">
<li class="visible-adv">
<img src="http://heidel.tw1.ru/test3/img/advantage_5.png" alt="" style="top: 11px; left: 12px;" />
<div class="advantage-item-title">test</div>
<div class="advantage-item-text">test</div>
</li>
<li class="visible-adv main-adv">
<img src="http://heidel.tw1.ru/test3/img/advantage_4.png" alt="" style="top: 11px; left: 2px;" />
<div class="advantage-item-title">test</div>
<div class="advantage-item-text">test</div>
</li>
<li class="visible-adv">
<img src="http://heidel.tw1.ru/test3/img/advantage_3.png" alt="" style="left: 2px;" />
<div class="advantage-item-title">test</div>
<div class="advantage-item-text">test</div>
</li>
<li>
<img src="http://heidel.tw1.ru/test3/img/advantage_2.png" alt="" style="top: 11px; left: 10px;" />
<div class="advantage-item-title">test</div>
<div class="advantage-item-text">test</div>
</li>
<li>
<img src="http://heidel.tw1.ru/test3/img/advantage_1.png" alt="" style="top: 11px; left: 5px;" />
<div class="advantage-item-title">test</div>
<div class="advantage-item-text">test</div>
</li>
</ul>
我的剧本
$.fn.toggle_class_3 = function () {
var lis = this.find('li'),
visibleLis = this.find('li.visible-adv'),
len = lis.length,
i = 0; // initialize pointer
setInterval(function () {
visibleLis.slice(i, i + 1).animate({
opacity: 0,
width: 0,
top: '50%',
'left': '-50%'
}, {
duration: 200,
queue: false,
complete: function () {
$(this).removeClass('visible-adv').css({
'top': '50%',
'left': '50%'
});
}
});
lis.slice( i + 3, i + 4).animate({
opacity: 1,
width: '274px',
height: 'auto',
left: 0,
top: 0
}, {
duration: 200,
queue: false,
complete: function () {
$(this).addClass('visible-adv');
}
});
i = (i + 1) % len;
}, 2000);
return this;
};
$('.advantages-list').toggle_class_3();
类.visible-adv'
最初被添加到前三个元素中,然后我从第一个元素中删除它并添加到第四个元素,依此类推。但我无法在周期中实现这一点。有没有办法让它发挥作用?