<html lang="en">
<head>
<meta charset="utf-8">
<title>漸變照片</title>
<style >
#photos img
{
position:absolute;
}
#photos
{
height:120px;
width:120px;
overflow:hidden；
}
<!-- 內部樣式表結束 -->
</style>
<script src="https://bbs.csdn.net/topics/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="photos">
<img alt="1" src='https://img.uj5u.com/2021/03/17/169466170656131.jpg'/>
<img alt="2" src="https://img.uj5u.com/2021/03/17/169466170656132.jpg"/>
<img alt="3" src="https://img.uj5u.com/2021/03/17/169466170656133.jpg"/>
<img alt="4" src="https://img.uj5u.com/2021/03/17/169466170656134.jpg"/>
<img alt="5" src="https://img.uj5u.com/2021/03/17/169466170656135.jpg"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
rotate(1);
});
function rotate(currentPhoto){
var numberOfPhotos=$('#photos img').length;
currentPhoto=currentPhoto%numberOfPhotos;//取模，保證地址再0-5；
<!--alert('當前照片'+currentPhoto); -->
$('#photos img').eq(currentPhoto).fadeOut(4000,function(){
<!--alert('進來了fadeOut');-->
$('#photos img').each(function(i){
$(this).css(
'zIndex',((numberOfPhotos-i)+currentPhoto)%numberOfPhotos
);
alert(i);
});
alert(this.src); //為什么這個this.src指示的圖片和下一句show顯示的圖片連接不一樣。
$(this).show(); //這句如果刪掉后來過一段時間漸變就變空白了，求解釋，為什么zindex切換不能實作切換呢，還要多這一句。
setTimeout(function(){rotate(++currentPhoto);},4000);
});
};
</script>
</body>
</html>
請大家最好斷點式除錯式解釋，讓我能快速明白里面的步驟和演化。分很多，主要是看大家的熱心了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/268626.html
標籤：JavaScript
上一篇：鏈接