1.HTML程式碼

<div id="wrap">
    <img src="images/1.jpg" alt="" class="on">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <div class="btn">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <i class="left" id="prev"></i>
    <i class="right" id="next"></i>
</div>

2.css程式碼

#wrap{
    position: relative;
    width:590px;
    height: 470px;
}
#wrap img{
    position: absolute;
    top: 0;
    left: 0;
    /*display: none;*/
    opacity: 0;
    
}
#wrap .on{
    /*display: block;*/
    transition: 2s;
    opacity: 1;
}
.btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -44px;
}
.btn span{
    float: left;
    width: 8px;
    height: 8px;
    border:2px solid rgba(255,255,255,0.4);
    border-radius: 5px;
    margin-right: 10px;
}
.btn .active{
    background: white;
    cursor: pointer;
}
.left,.right{
    display: block;
    width: 37px;
    height: 53px;
    position: absolute;
    top: 50%;
    margin-top: -27px;
    cursor: pointer;
}
.left{
    background: url("images/arrow.png") left top;
}
.right{
    background: url("images/arrow.png") left -53px;
    right: 0;
}

3.js程式碼

window.onload = function () {
    var oWrap = document.getElementById('wrap');
    var aImg = oWrap.getElementsByTagName('img');
    var aBtn = oWrap.getElementsByTagName('span');
    var oPrev = document.getElementById('prev');
    var oNext = document.getElementById('next');
    var iNow =0;

    function tab(){
        for (var i =0;i<aBtn.length;i++){//清空所有按鈕選中樣式以及圖片顯示樣式
            aBtn[i].className='';
            aImg[i].className='';
        }
        aBtn[iNow].className='active';//設定當前按鈕選中樣式以及當前圖片透明度
        aImg[iNow].className='on';
    }

    setInterval( function () {//每兩秒迴圈變換下一張圖片
            iNow++;
            if (iNow==aBtn.length)iNow=0;
           tab();
    },2000);

    for (var i =0;i<aBtn.length;i++){
        aBtn[i].index=i;//為按鈕新增自定義屬性（索引）目的是使圖片和按鈕相對應
        //按鈕
        aBtn[i].onmouseover= function () {
            iNow=this.index; //是按鈕所控制顯示的圖片與左右箭頭控制顯示的圖片相對應
            tab();
        }
        //下一個箭頭
        oNext.onclick = function () {
            iNow++;
            if (iNow==aImg.length)iNow=0;
            tab();
        }
        //上一個箭頭
        oPrev.onclick = function () {
            iNow--;
            if (iNow==-1)iNow=aImg.length-1;
            tab();
        }

    }

}

靜態效果圖：（不會截動態的）