例如,我有 9 张图片,从一开始就显示了 3 张。我想让它们依次淡出到另一个图像一次,例如:http: //jsfiddle.net/linuxatico/C9Tw2/7/
在这个版本中,我有 3 个循环调用,由定时初始化分隔。我发现,使用 3 个不同的周期,时间越长,重叠褪色图像的时间效果就越多。我相信这可以通过一个循环动画来解决,但我不知道该怎么做。你有解决方案吗?
HTML:
<div class="container">
<ul class="first">
<li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /></li>
<li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" /></li>
<li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></li>
</ul>
<ul class="second">
<li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00001.jpg" /></li>
<li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00002.jpg" /></li>
<li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00003.jpg" /></li>
</ul>
<ul class="third">
<li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00004.jpg" /></li>
<li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00005.jpg" /></li>
<li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00006.jpg" /></li>
</ul>
</div>
JS:
jQuery('.first').cycle({
fx: 'fade',
delay: -1000
});
jQuery('.second').cycle({
fx: 'fade',
delay: -2000
});
jQuery('.third').cycle({
fx: 'fade',
delay: -3000
});
编辑:我在这里有一个稍微不同的要求:3 个转换,转换之间的暂停时间