之前寫了從左向右滑動的輪播圖，發現圖片從最后一張滑到第一張效果不太好，於是又寫了淡入淡出效果的輪播圖，主要是利用CSS3的特性transition。
原理
將圖片疊加在一起，每次只有顯示的圖片透明度為1，其余的透明度都設置為0。
點擊查看效果
HTML部分
nav為總容器，第一個ul列表#index為小圓點列表，鼠標覆蓋哪個小圓點就顯現第幾張圖片，on是一個給小圓點添加背景顏色屬性的類；第二個ul列表#img為圖片列表，opa-on是給圖片設置透明度為1的類。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Figure</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--淡入淡出-->
<nav>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li class="opa-on"><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
CSS部分
這里需要注意nav和ul#img設置的寬度均為720px，即一張圖片的寬度。而且必須設置#img li中的position:absolute的設置，這個樣式讓圖片均疊加在一起，圖片之間沒有先后順序。如果position設置為relative，會因為li出現的先后關系只顯示第一張圖片，不管這張圖片是顯示還是隱藏，后面的圖片會一直被第一張圖片覆蓋。
css3中的transition
transition是css3的樣式， 它允許css的屬性值在一定時間內平滑的過渡。
語法是這樣的：transition: property duration timing-function delay
property：是css的屬性值，比如opacity、border-radius等，也可以是all，表示所有的css屬性。
duration：表示過渡的時間。
timing-function：表示執行動畫的函數。
delay：表示執行動畫的延遲時間。
transition: opacity 1s ease-in;表示opacity在1s內以ease-in的函數實現過渡效果。
*{
margin:0;
padding:0;
}
nav{
width: 720px;
height: 405px;
margin:20px auto;
overflow: hidden;
position: relative;
}
#index{
position: absolute;
left:320px;
bottom: 20px;
}
#index li{
width:8px;
height: 8px;
border: solid 1px gray;
border-radius: 100%;
background-color: #eee;
display: inline-block;
}
#img{
width: 720px;
height: 405px;
}
#img li{
width: 720px;
height: 405px;
position: absolute;/*必須設置為absolute，否則第一個li會把后面的都覆蓋*/
z-index: -1;
opacity: 0;
transition: opacity 1s ease-in;
}
#index .on{
background-color: black;
}
#img .opa-on{
opacity: 1;
}
JavaScript部分
移動函數
圖片移動的函數和小圓點移動的函數是差不多的，只不過是類的區別，一個是on，另一個是opa-on。先清除之前的樣式，然后在當前圖片或小圓點的li上動態添加樣式。
function moveImg(list,index) {
for(var i=0;i<list.length;i++){
if(list[i].className=='opa-on'){//清除li的透明度樣式
list[i].className='';
}
}
list[index].className='opa-on';
}
function moveIndex(list,num){//移動小圓圈
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景樣式
list[i].className='';
}
}
list[num].className='on';
}
自動播放
這個基本上和從左到右滑動的輪播圖效果一樣，就不過多描述了。
var imgList=document.getElementById('img').getElementsByTagName('li');
var list=document.getElementById('index').getElementsByTagName('li');
var index=0;
var timer;
for(var i=0;i<list.length;i++){//鼠標覆蓋上哪個小圓圈，圖片就移動到哪個小圓圈，並停止
list[i].index=i;
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
index=clickIndex;
moveImg(imgList,index);
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout= function () {//移開后繼續輪播
play();
};
}
var nextMove=function(){
index+=1;
if(index>=5){
index=0
}
moveImg(imgList,index);
moveIndex(list,index);
};
var play=function(){
timer=setInterval(function(){
nextMove();
},3000);
};
play();
總結
淡入淡出的輪播圖效果還是比較簡單的，只要弄清楚css3特性中的過渡效果就比較水到渠成了。