我基本上想制作一个幻灯片,图片会在大约5秒钟后淡入淡出。幻灯片上有一堆图片,而不是并排的。我该如何让img1在5秒后淡出并使img2淡入,然后让img2在另外5秒后淡出并使img3淡入,以此类推?
我考虑使用setInterval()函数,但我不知道它是如何工作的。也许可以使用delay()函数?
我考虑使用setInterval()函数,但我不知道它是如何工作的。也许可以使用delay()函数?
<div id="images">
<ul
><li><img src="img/11.jpg" width="520" height="203" alt="" /></li
><li><img src="img/12.jpg" width="520" height="203" alt="" /></li
><li><img src="img/13.jpg" width="520" height="203" alt="" /></li
><li><img src="img/14.jpg" width="520" height="203" alt="" /></li
><li><img src="img/15.jpg" width="520" height="203" alt="" /></li
><li><img src="img/5.jpg" width="520" height="203" alt="" /></li
></ul>
</div>
CSS
#images ul{position:absolute;right:9px;top:1px;width:520px;height:202px;list-style:none;overflow:hidden}
#images li{display:none;position:absolute;left:0;top:0;}
JS
$(document).ready(
function() {
var i = 0, j = 0;
var imgs = $('#header ul').children();
runIt(imgs);
function runIt() {
$(imgs).eq(i).fadeIn(3000, function() {
setTimeout(runIt,'200');
});
i = i + 1;
if (i == imgs.length) {
i = 0; $('#images li').fadeOut(1000)
}
}
});
当我尝试在一个切片画廊中使用淡入淡出效果时,我遇到了IE浏览器的问题。我使用的是jQuery库 "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"。当我改用 "http://code.jquery.com/jquery-1.9.1.js" 库后,IE、Chrome和FF都没有问题,我可以跳过所有修改。
j = 0
是在做什么? - David Rhoden