原声JS 轮播图,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #cont{position: absolute;margin-left: 40%;margin-top: 40px;}
            #cont p:nth-of-type(1){
                width: 20px;
                height: 30px;
                background: gray;
                position: absolute;
                left:0;top:50%;
                font-size: 14px;
                line-height: 30px;
                text-align: center;
                display: none;
            }
            #cont p:nth-of-type(2){
                width: 20px;
                height: 30px;
                background: gray;
                position: absolute;
                right:0;
                top:50%;
                font-size: 14px;
                line-height: 30px;
                text-align: center;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id='cont'>
                <p id='btn'><</p>
                <img id='round' src='img/2.jpg'>
                <p id='sub'>></p>
            </div>
        </div>
        <script type="text/javascript">
            //获取元素
            var oBtn = document.getElementById('btn');
            var oSub = document.getElementById('sub');
            var oCont = document.getElementById('cont');
            //创建数组
            var arr = new Array('2.jpg','3.jpg','4.jpg','5.jpg','6.jpg');
            // 设置自动轮播
            var timer = null;
            //设置当前下标
            var index = 0;
            function autoPlay(){
                timer = setInterval(function(){
                    var Img = document.getElementById('round');
                    if(index == arr.length - 1){
                        index = 0;
                    }else{
                        index ++;
                    }
                    Img.src = 'img/' + arr[index];
                },1500)
            }
            //移入事件
            oCont.onmouseenter = function(){
                oBtn.style.display = 'block';
                oSub.style.display = 'block';
                clearInterval(timer);
            }
            //添加点击事件
            oBtn.onclick = function(){
                var Img = document.getElementById('round');
                if(index == arr.length - 1){
                    index = 0;
                }else{
                    index ++;
                }
                Img.src = 'img/' + arr[index];
            }
            oSub.onclick = function(){
                var Img = document.getElementById('round');
                if(index == arr.length - 1){
                    index = 0;
                }else{
                    index ++;
                }
                Img.src = 'img/' + arr[index];
            }
            //移除事件
            oCont.onmouseleave = function(){
                oBtn.style.display = 'none';
                oSub.style.display = 'none';
                autoPlay();
            }
        </script>
    </body>
    </html>