JS輪播圖帶序號小點和左右按鈕

輪播圖作為前端比較簡易的動畫，使用非常頻繁，這里記錄以便使用

此輪播圖為最簡易自動播放，非無縫，但有按鈕，有序號跳轉小點

想看全套輪播圖可以查看我的分類輪播圖全套

html布局

<div style="width: 100%;">
        <div id="zuo" onClick="huan('zuo')">《</div>
        <div class="tu">
            <img src="02xsxx.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181011qlqnlt.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181011rcqx.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181016qdxq.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181018-sdlt0.jpg" alt="">
        </div>
        <div class="tu">
            <img src="20181022fanzeng.jpg" alt="">
        </div>
<!-- 此處有函數 huan() 參數為   'zuo' 和  'you' 切換圖片按鈕-->
        <div id="you" onClick="huan('you')">》</div>
    </div>
    
    
    
    <div id="dian">
        <div style="width:230px; margin: auto; height: 30px;">
<!-- 此處添加函數   dianji() 點擊小點切換圖片-->

            <div onClick="dianji(0)" class="dian"></div>
            <div onClick="dianji(1)" class="dian"></div>
            <div onClick="dianji(2)" class="dian"></div>
            <div onClick="dianji(3)" class="dian"></div>
            <div onClick="dianji(4)" class="dian"></div>
            <div onClick="dianji(5)" class="dian"></div>
        </div>
    </div>

css樣式

        *{
        margin: 0 auto;
        padding: 0 auto;
    }
    .tu{
        float: left;0
        width: 100%;
        display: none;
    }
    .tu img{
        width: 100%;
    }
    #zuo{
        position: absolute;
        top: 300px;
        background-color: rgba(255,255,255,0.50);
        width: 40px;
        height: 40px;
    }
    #you{
        position: absolute;
        top: 300px;
        background-color: rgba(255,255,255,0.50);
        width: 40px;
        height: 40px;
        right: 5px;
    }
    
    #dian{
        text-align: center;
        position: relative;
        top: -60px;
    }
    
    .dian{
        float: left;
        border: 1px solid rgba(255,255,255,1.00);
        border-radius: 30px;
        width: 30px;
        height: 30px;
        margin-left: 5px;
        background-color: rgba(0,0,0,1.00);
    }

同樣布局不用要完全可以自己布局，下面看js

　　 var jishu=0;    //記錄到第幾張
    var tu;            //接收圖片的dom
    var dian;        //接收小點dom
//    自己播放函數，不懂請看輪播圖全套里 JS最通俗易懂簡易輪播實現
    function aaa(){
        tu =document.getElementsByClassName("tu"); 
        dian =document.getElementsByClassName("dian"); 
        
        //顯示當前隱藏其他
        for(var a=0;a<tu.length;a++){
            if(a==jishu){
                tu[jishu].style.display="block";
                dian[jishu].style.border="1px solid rgba(255,0,4,1.00)";
                dian[jishu].style.backgroundColor = "white";
            }else{
                tu[a].style.display="none";
                dian[a].style.border="1px solid rgba(255,255,255,1.00)";
                dian[a].style.backgroundColor = "black";
            }
        }
        //到最后一張回到第一張
        if(jishu>tu.length-2){
            jishu=0;
        }else{
            jishu++;
        }
        
        
    }
    aaa();
    var dong = setInterval("aaa()",2000);
//    切換上一張和下一張
    function huan(data){
//        先暫停，防止出現手動切換和自動切換重疊
        clearInterval(dong);
//        判斷實參
        if(data=="zuo"){
// jishu<=1請情況有兩種，0和1
            if(jishu<=1){
　　// 如果是0那么當前顯示的是第6張，請結合上面jishu清零語句
                　　if(jishu==0){
　　// 那么jishu=4就是顯示 第五張
                    　　jishu=4;
                　　}else{
　　// 否則jishu=1時，顯示的是第一張，結合上面jishu+1操作，jishu=5就是顯示第六張
                    　　jishu=5;
                　　}
               　　 
            }else{
　　// 此處否則 顯示上一張，此處需要-2因為每次運行完jishu都會多加1
                jishu=jishu-2;
            }
            
        }else{
　　// 否則 此處是向右滾動，向左判斷完成后，向右只考慮最后一張的情況。jishu=6時顯示的是五張，再點擊一次需要回到第一張
            if(jishu>=6){
                jishu=0;
            }
        }
　　// 判斷完運行左還是右之后重新調用函數即可
        aaa();
        dong = setInterval("aaa()",2000);
    }
//    
//    小點翻頁
    function dianji(data){
        clearInterval(dong);
　　// 參考html代碼中，給此函數的實參
        jishu = data;
        
        aaa();
        dong = setInterval("aaa()",2000);
    }