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()
                }
            }

｝