这是一个交叉淡入淡出幻灯片放映。我不明白这在下面的代码中做了什么:rotatePics(1);
HTML
<div id="photos">
<img alt="Glendatronix" src="../../images/glenda_200.jpg" />
<img alt="Darth Fader" src="../../images/fader_200.jpg" />
<img alt="Beau Dandy" src="../../images/beau_200.jpg" />
<img alt="Johnny Stardust" src="../../images/johnny_200.jpg" />
<img alt="Mo' Fat" src="../../images/mofat_200.jpg" />
</div>
JS
$(document).ready(function() {
rotatePics(1);
}
function rotatePics(currentPhoto) {
var numberOfPhotos = $('#photos img').length;
currentPhoto = currentPhoto % numberOfPhotos;
$('#photos img').eq(currentPhoto).fadeOut(function() {
// re-order the z-index
$('#photos img').each(function(i) {
$(this).css(
'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
);
});
$(this).show();
setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
});
}