任何網站主頁都離不開一個輪播圖，這是滾動播放新聞或者廣告或者內容的招牌，類型有很多，我們可以做一個淡入淡出的輪播圖。
首先分析，淡入淡出指的是沒有滑動效果，一張圖片消失的時候另一張圖片接着顯示出來，仔細分析可以知道在一個輪播框內其實利用絕對定位放了好幾張圖片，
利用他們的透明度的改變依次出現和消失。
效果圖如下：
布局如下：
<div id="banner"> <ul> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> </ul> <div id="direction"> <a href="##"><</a> <a href="##">></a> </div> <div id="btn"> <a href="##" class="active"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div>
CSS樣式：
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
#banner{
width: 800px;
height: 400px;
margin:50px auto;
position: relative;
}
ul li img{
width: 800px;
height: 400px;
display: block;
}
ul li{
position: absolute;
opacity: 0;
}
ul li:first-child{
opacity: 1;
}
#direction>a{
position: absolute;
width: 50px;
height: 30px;
display: inline-block;
background: #000;
color: white;
text-align: center;
line-height: 30px;
font-size: 20px;
top:185px ;
}
#direction>a:last-child{
right: 0;
}
#btn{
position: absolute;
top: 370px;
left: 45%;
}
#btn>a{
display: inline-block;
width: 20px;
height: 20px;
border-radius:50%;
margin-left: 10px;
background: #ccc;
}
#btn>.active{
background: red;
}
JS代碼及注釋：
<script src="move.js"></script>
<!--這里引入的是一個用原生JS封裝的框架，后面都會用到，主要是用來改變對應元素的透明度的-->
<script>
//inow為當前圖片，next為下一張要顯示的圖片
var inow=0;
var next=0;
var timer=null;
//獲取所有的li標簽以
var aLi=document.getElementsByTagName("li");
//獲取所有的選項卡的標簽
var abtn=document.querySelectorAll("#btn>a");
//獲取方向按鈕的標簽
var aD=document.querySelectorAll("#direction>a");
//獲取輪播框元素
var banner=document.getElementById("banner");
//封裝圖片切換函數並匹配選項卡
function toImg(){
move(aLi[inow],{opacity:0});
move(aLi[next],{opacity:100});
inow=next;
//遍歷每一個選項卡讓所有的樣式清空
for(var i=0;i<abtn.length;i++){
abtn[i].className="";
}
//但是讓顯示的圖片對應的選項卡具備樣式
abtn[next].className="active"
}
//封裝一個自動播放的函數
function autoplay(){
timer=setInterval(function(){
//如果當前播放到最后一張那么下一張就是第一張圖片否則就是它的下一張圖片
//3秒輪播
if(next==aLi.length-1){
next=0;
}else{
next++;
}
toImg();
},3000)
}
//直接調用這個函數到這一步其實已經初步完成輪播圖的主要功能，精益求精再添加功能
autoplay();
//鼠標移上清除定時器停止自動播放，移出繼續播放
banner.onmouseover=function(){
clearInterval(timer);
}
banner.onmouseout=function(){
autoplay();
}
//添加方向按鈕這里有兩個判斷，當在第一張圖片上按上一張按鈕這時讓next為最后一個索引，而同理當是
//最后一張圖片上按下一張按鈕會下一張為第一張圖片的索引
aD[0].onclick=function(){
if(next==0){
next=aLi.length-1;
}else{
next--;
}
toImg();
}
aD[1].onclick=function(){
if(next==aLi.length-1){
next=0;
}else{
next++;
}
toImg();
}
//添加選項卡
for(var i=0;i<abtn.length;i++){
//給abtn[i]添加屬性來保存當前索引下面要用到
abtn[i].index=i;
//給每一個按鈕添加鼠標移入事件，事件發生時讓所有按鈕樣式清空透明度為0，唯獨給當前選項卡添加樣式以及當前圖片顯示
abtn[i].onmouseover=function(){
for(var j=0;j<abtn.length;j++){
abtn[j].className="";
move(aLi[j],{opacity:0});
}
this.className="active";
move(aLi[this.index],{opacity:100})
next=this.index;
inow=next;
}
}