我正在尝试使用JavaScript在我的网站上播放幻灯片。
这是我的HTML:
<div id="image_slider">
<img class="active" src="images/slider/slider1.jpg" alt="My image" />
<img src="images/slider/slider1.jpg" alt="My image" />
<img src="images/slider/slider2.jpg" alt="My image" />
<img src="images/slider/slider3.jpg" alt="My image" />
<img src="images/slider/slider4.jpg" alt="My image" />
<img src="images/slider/slider5.jpg" alt="My image" />
</div>
这是我的JavaScript:
function cycleImages(){
var $active = $('#image_slider .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#image_slider img:first');
$next.css('z-index',2); //move the next image up the pile
$active.fadeOut(1000,function(){ //fade out the top image
$active.css('z-index',1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index',3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function(){
// run every 3s
setInterval('cycleImages()', 3000);
})
代码运行良好,但有一个小故障。
页面加载时,第一张图像会在很长一段时间后淡化为第二张图像。当循环重复时,再次看到这种奇怪的行为。
为什么第一张图片出现这种滞后?