原生js封裝輪播圖

　　我的實際開發中用到的效果問題總結出來便於本身之後開發查看調用,若是也適用其餘人請隨意拿走勿噴就行!

　　原生js對於思路要求比較高,在js代碼我都寫有備註,足夠理解並使用,即便是小白或者剛入行的程序員也比叫好理解,其輪播圖只是一個簡單的效果,缺點沒有寫動畫效果看起來比較生硬,優勢簡單好學,容易理解,很是實用

　　輪播圖介紹 : 三張圖片,圖片下方有對應圖片數量的三個指示點,左右有切換指示,左右指示可要可不要

HTML代碼

<div id="mlBox">
        <div id="mlImg">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=511087584,1746612192&fm=26&gp=0.jpg" alt="" id="mlShow">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2251986177,3999926444&fm=26&gp=0.jpg" alt="">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2929314891,994527773&fm=26&gp=0.jpg" alt="">
        </div>
        <p id="mlSpan">
            <span id="mlOn"></span>
            <span></span>
            <span></span>
        </p>
        <div id="mlLeft">
            <img src="image/mlLeft.png" alt="">
        </div>
        <div id="mlRight">
            <img src="image/mlRight.png" alt="">
        </div>
    </div>

CSS代碼

<style>
        #mlBox{
            width: 600px;
            height: 500px;
            position: relative;
            margin: 50px auto;
            border: 1px #ececec solid;
        }
        #mlImg{
            width: 600px;
            height: 500px;
        }
        #mlImg img{
            width: 600px;
            height: 500px;
            display: none;
        }
        #mlSpan{
            width: auto;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 20px;
        }
        #mlSpan span{
            display: block;
            float: left;
            width: 10px;
            height: 10px;
            background: cornflowerblue;
            border-radius: 50%;
            margin: 0 2px;
            z-index: 100;
        }
        #mlImg #mlShow{
            display: block;
        }
        #mlSpan #mlOn{
            background: chartreuse;
        }
        #mlLeft{
            width: 30px;
            height: 30px;
            background: rgba(51,51,51,0.7);
            position: absolute;
            left: 0;
            top: 50%;
            display: none;
        }
        #mlLeft img{
            width: 30px;
            height: 30px;
            display: block;
        }
        #mlRight img{
            width: 30px;
            height: 30px;
            display: block;
        }
        #mlRight{
            width: 30px;
            height: 30px;
            background: rgba(51,51,51,0.7);
            position: absolute;
            right: 0;
            top: 50%;
            display: none;
        }
</style>

JS代碼

<script>
    ml(true);  //調用ml函數  注:傳參是否須要左右指示  默認false
    function ml(indicator) {
        var oMlBox = document.getElementById('mlBox');  //獲取id:mlBox
        var oMlImg = document.getElementById('mlImg');  //獲取id:mlImg
        var oMlSpan = document.getElementById('mlSpan');  //獲取id:mlSpan
        var aSpan = oMlSpan.getElementsByTagName('span');  //獲取id:mlSpan裏面的span標籤
        var aImg = oMlImg.getElementsByTagName('img');  //獲取id:mlImg裏面的img標籤
        var oMlLeft = document.getElementById('mlLeft');  //獲取id:mlLeft
        var oMlRight = document.getElementById('mlRight');  //獲取id:mlRight
        var u = 0;  //當前照片位置
        var shut = null;  //定時器的名字
        function f1() {
            for (var i = 0; i < aSpan.length; i++) {  //循環id:mlSpan裏面的span標籤
                aSpan[i].id = '';  //讓span標籤的id等於空
                aImg[i].id = '';  //讓id:mlImg裏面img標籤id等空
            }
            aSpan[u].id = 'mlOn';  //當前位置的span標籤id等於mlOn
            aImg[u].id = 'mlShow';  //當前位置的img標籤id等於mlShow
        }
        for (var f = 0; f < aSpan.length; f++) {  //循環id:mlSpan裏面的span標籤
            aSpan[f].index = f;  //span標籤第f個的index等於f
            aSpan[f].onclick = function () {  //點擊span標籤  注:照片下面的三個點
                u = this.index;  //當前位置等於當前span標籤index的位置
                f1();  //調用f1函數
            }
        }
        oMlBox.onmousemove = function () {  //鼠標懸浮id:mlBox
            clearInterval(shut);  //關閉定時器
            if (indicator) {  //是否顯示左右指示  注:調用ml函數傳參
                oMlLeft.style.display = 'block';  //顯示左指示
                oMlRight.style.display = 'block';  //顯示右指示
                oMlRight.onclick = function () {  //點擊右指示
                    u++;  //當前位置加一
                    if (u >= aImg.length) {  //當前位置大於照片的數量就等於0
                        u = 0;
                    }
                    f1();  //調用f1函數
                };
                oMlLeft.onclick = function () {  //點擊左指示
                    u--;  //當前位置減一
                    if (u < 0) {  //當前位置小於0時就讓當前位置等於照片數量減一
                        u = aImg.length - 1;  //注:由於計算機從零開始數因此要減一
                    }
                    f1();  //調用f1函數
                };
            }else{
                oMlLeft.style.display = 'none';  //左指示消失
                oMlRight.style.display = 'none';  //右指示消失
            }
        };
        oMlBox.onmouseout = function () {  //當鼠標移出id:mlBox
            f2();  //調用f2函數
            oMlLeft.style.display = 'none';  //左指示消失
            oMlRight.style.display = 'none';  //右指示消失
        };
        function f2(){
            shut = setInterval(function () {  //定時器
                u++;  //每3秒當前位置加一
                if (u >= aImg.length) {  //當前位置大於等於照片的數量當前位置等於0
                    u = 0;
                }
                f1();  //調用f1函數
            },3000);
        }
        f2();  //調用f2函數
    }
</script>