js寫很菜的輪播圖

    <div id="imgs">
        <img src="img/xmad_1496676101228_Tjuqb.jpg" alt="">
        <img src="img/xmad_14954204614402_ryTxl.jpg" alt="">
        <img src="img/xmad_14962269003907_VWLCx.jpg" alt="">
        <img src="img/xmad_14970180755263_SbmYT.jpg" alt="">
        <img src="img/xmad_14970188542193_PCzUo.jpg" alt="">
        <img src="img/xmad_14970190941587_RoJKv.jpg" alt="">

        <a href="javascript:;"class="pre move" id="pre"><</a>
        <a href="javascript:;"class="next move" id="next"> ></a>

        <ul>
            <li style="background: rgba(255,255,255,.5)"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

------------------------------------------------------------------

#imgs{
    width: 1226px;
    height: 460px;
    position: relative;
}
#imgs ul{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 100px;
}
#imgs ul li{
    float: left;
    width: 10px;
    height: 10px;
    border: 2px solid #b0b0b0;
    border-radius: 50%;
    background: rgba(0,0,0,.3);
    margin-right: 5px;
}
#imgs img{
    width: 1226px;
    height: 460px;
    position: absolute;
    top:0;
    left:0;
}

-------------------------------------------

window.onload = function ()
{
        var imgs = document.getElementById('imgs');  //抓外層盒子
        var imgss = imgs.getElementsByTagName('img');  //抓所有圖片

        var pre = document.getElementById('pre');   //抓上翻按鈕
        var next = document.getElementById('next'); // 抓下翻按鈕

        var li = imgs.getElementsByTagName('li');   //抓所有小點
        var num = 0;    //設置變量

        function hidd()   //隱藏
        {
            for(var i = 0; i < imgss.length; i++)   //遍歷所有圖片，全部隱藏
            {
                imgss[i].style.display = 'none';
            }
            imgss[num].style.display = 'block';  // 只讓數值是num 的顯示
            for(var k = 0; k < li.length; k++)   //遍歷所有點， 讓全部隱藏
            {
                li[k].style.background = 'none';
            }
            li[num].style.background = 'rgba(255,255,255,.5)';  //只讓是num 的顯示
        }

        var timer = setInterval(run,3000);  //設置定時器，以便輪播
        function run() {
            num++;
            if (num == imgss.length)  //當num的值== 所有img圖片的長度時，讓 num = 0；
            {
                num = 0;
            }
            hidd();
        }
            imgs.onmouseover = function ()   //當鼠標經過盒子時， 讓圖片停止輪播
            {
                clearInterval(timer);
            }
            imgs.onmouseout = function ()   // 當鼠標離開盒子時，讓圖片繼續輪播
           {
                timer = setInterval(run,3000);
            }

            pre.onclick = function ()   //當點擊上翻按鈕時，num自減1
            {
                num = num-1;
                if (num == -1)   //如果num == -1時。
                {
                    num = imgss.length-1;  //將所有圖片長度-1 給num， 因爲num是從0開始的，所以要長度-1
                }
                hidd();   //調用函數執行
            }
            pre.onmouseover = function ()
            {
                pre.style.background = 'rgba(0,0,0,.5)';
            }
            pre.onmouseout = function ()
            {
                pre.style.background = 'none';
            }

            next.onclick = function ()  //當點擊下翻按鈕時。
            {
                num = num + 1;
                if (num == imgss.length)  //如果num == 所有圖片長度
                {
                    num = 0;   //讓num = 0，
                }
                hidd();   //執行函數
            }
            next.onmouseover = function ()
            {
                next.style.background = 'rgba(0,0,0,.5)';
            }
            next.onmouseout = function ()
            {
                next.style.background = 'none';
            }

            for(var j = 0; j < li.length; j++)   //給每個點 添加點擊事件
            {
                li[j].index = j;    //  將點擊的值保存
                li[j].onclick = function ()
                {
                    var S = this.index;   //
                    num = S;
                    hidd()
                }
            }

｝