好的,我有这样的代码:
function swapImages() {
$('.recipeImages').each(function() {
if($('li.active', this).length == 0) {
$('li:first', this).fadeIn(1000, function() {
$(this).addClass('active');
});
return;
}
var $active = $('li.active', this);
var $next;
if($active.next().length == 0)
$next = $('li:first', this);
else
$next = $('li.active', this).next();
$active.fadeOut(1000, function() {
$active.removeClass('active');
$next.fadeIn(1000, function() {
$(this).addClass('active');
});
});
});
}
swapImages();
setInterval('swapImages()', 5000);
<ul class="recipeImages">
<li style='display:none;'><img src='images/food.jpg' /></li>
<li style='display:none;'><img src='images/food_cukinija.jpg' /></li>
<li style='display:none;'><img src='images/food_hamburger.jpg' /></li>
<li style='display:none;'><img src='images/food_sushi.jpg' /></li>
</ul>
这里有什么问题?当它到达最后一个 LI 元素并且没有下一个元素时,它的行为很奇怪。它只是停止,然后第一个出现,最后一个出现等等......但直到他来到这一点
if($active.next().length == 0)
$next = $('li:first', this);
它完美地工作。
好的,找到问题了。当图像处于绝对位置时,它会以某种方式工作