最簡單最詳細的原生js寫輪播圖

該輪播圖實現了自動輪播，圖片切換，滑鼠移入移出事件，佈局簡單，容易上手。希望能幫到大家。效果圖如下：

佈局擴充套件

裡面用了幾種方式實現了div的垂直居中，可見樣式程式碼註釋。

HTML

@HTML頁面佈局
 <!-- 介紹團隊  -->
    <div id="introduce_page" class="page">
      <div id="banner"><!-- 輪播 -->
        <div id="pic"><!-- 輪播圖片佈局 -->
 

          <img src="images/1.jpg" id="img">
          <a href="javascript:;" id="prve"><</a><!-- 左邊切換按鈕 -->
          <a href="javascript:;" id="next">></a><!-- 右邊邊切換按鈕 -->
          <span id="span">數量正在載入中......</span><!--圖片數量 -->
          <p
 
 id="p">圖片正在載入中.......</p><!--圖片說明 -->
          <ul id="ul"></ul><!-- 輪播小圓點 -->
        </div>
        <div id="word">輪播圖片文字介紹正在載入中....... </div><!--介紹文字說明-->
      </div>
    </div> 

CSS

@css樣式佈局
 #introduce_page{  
    background
 
:rgb(10, 10, 10);  
    border: solid 1px rgba(0,0,0,0);
}   

#banner{
    width: 50%;
    height: 50%;
    border: solid 2px rgba(238,238,238,0.13);
    vertical-align: middle;
    /* 垂直居中banner */
    position: relative;
    left: 50%; /* 定位父級的50% */
    top: 50%;
    transform: translate(-50%,-50%); /*自己的50% */
    color: aliceblue;
}

#pic{
    width: 70%;
    height: 100%;
    float: left;
    border: solid 1px rgba(238,238,238,0.13);
    position: relative;
}

#word{
    width: 20%;
    height: 50%;
    float: right;
    border: solid 1px rgba(238,238,238,0.13);
    margin: auto;  
    /* 垂直居中靠右文字介紹 */
    position: absolute;  
    top: 0;bottom: 0; right: 0; 

}

#prve{
    /* 垂直居中靠左切換按鈕*/
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#next{
      /* 垂直居中靠右切換按鈕 */
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

a{
    width: 40px;
    height: 40px;    
    text-decoration: none;
    font-size: 30px;
    background: #000000;
    color: #ffffff;
    filter: alpha(opacity 40);
    opacity: 0.4;
}

a:hover{
    filter: alpha(opacity 90);
    opacity: 0.9;
}

img{
    height: 100%;
    width: 100%;
}

#p,#span{
    width: 100%;
    height: 30px;
    filter:alpha(opacity 40);
    opacity: 0.4;
    background-color: black;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    border: solid 1px rgba(0,0,0,0);
}

#span{
    position: absolute;
    top:0;
}
#p{
    position: absolute;
    left: 0;right: 0;
    bottom: 0;margin: auto;
} 


#ul{
    margin: 0;
    padding: 0;
    width:14%;
    height: 30%;
    text-align: center;
    border: solid 1px rgba(0,0,0,0);
    position: absolute;
    right: 0;left: 0;bottom: 30px;
    margin: auto;
    height: 20px;
}

#ul li {
    width: 13px;
    height: 13px;
    list-style: none;
    border-radius: 100%;
    float: left;
    margin:0 2px;
    border: 1px #ccc solid;

}

.on{
    background-color: #ffffff;
}

JavaScript

@JavaScript程式碼
 //獲取元素
var oBanner=document.getElementById('banner');
var oPic=document.getElementById('pic');
var oImg=document.getElementById('img');
var oPrve=document.getElementById('prve');
var oNext=document.getElementById('next');
var oSpan=document.getElementById('span');
var oP=document.getElementById('p');
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
var oText=document.getElementById('word');

//陣列存放在圖片的地址，數量（模擬資料）
var arrUrl=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
var arrTitle=['圖片1','圖片二','圖片三','圖片四'];
var arrText=['圖片1介紹文字片段','圖片2介紹文字片段','圖片3介紹文字片段','圖片4介紹文字片段'];
var num=0;

//往ul裡面動態新增li
for(var i=0;i<arrUrl.length;i++){
    oUl.innerHTML+='<li></li>';
}

console.log(oUl);

//點選圖片切換
function fnTab(){
    oImg.src=arrUrl[num];//改圖片的src
    oSpan.innerHTML=1+num+'/'+arrUrl.length;//圖片數量字串拼接  '1/4' 的形式.
    oP.innerHTML=arrTitle[num];//圖片標題
    oText.innerHTML=arrText[num];//圖片介紹文字
    for(var i=0;i<aLi.length;i++)//切換小圓點樣式
    {
        aLi[i].className='';
    }
    aLi[num].className='on';
}
fnTab();

//點選左邊
oPrve.onclick=function(){
    num--;
    if(num==-1)
    {
        num=arrUrl.length-1;
    }
    fnTab();
}

//點選右邊
oNext.onclick=function(){
    num++;
    if(num==arrUrl.length)
    {
        num=0
    }
    fnTab();
}

//點選小圓點
for(var i=0;i<aLi.length;i++){
    aLi[i].index=i;//自定義屬性，索引值
    aLi[i].onclick=function(){
        num=this.index;
        fnTab();
    }

}

//定時器自動輪播
var timer=null;
function autoPlay(){
    timer=setInterval(function(){
        num++;
        num%=arrUrl.length;
        fnTab();
    },1000);
}

// autoPlay();
setTimeout(autoPlay,2000);

//滑鼠移入清除定時器
oBanner.onmouseover=function(){
    clearInterval(timer);
}

//滑鼠移出
oBanner.onmouseout=autoPlay;