<style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none
        }

        li {
            list-style-type: none;
        }

        #coural {
            width: 360px;
            height: 200px;
            position: relative;
        }

        #coural .left,
        .right {
            position: absolute;
            top: 40%;
            transform: scale(2, 1.5);
            background: blue;
            color: #fff;
            border-radius: 2px;
        }

        #coural .left {
            left: 10px;
        }

        #coural .right {
            right: 10px;
        }

        #coural .number {
            position: absolute;
            left: 30%;
            top: 80%;
        }

        #coural .number span {
            display: inline-block;
            padding: 5px 10px;
            margin-left: 10px;
            background: #aaa;
            border-radius: 50%;
        }

        #coural .active {
            background: #09f!important;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="coural">
        <div class="img">
            <a href="javascript:;">
                     <img src="./pic/1.jpg">
                 </a>
        </div>
        <div class="left">
            <</div>
                <div class="right">></div>
                <div class="number">
                    <span class="active">1</span>
                    <span>2</span>
                    <span>3</span>
                </div>
        </div>
        <script>
            var span = document.querySelectorAll("#coural  span"),
                arrImg = ["1.jpg", "2.jpg", "3.jpg"],
                // img=document.querySelector("#coural .number  img")无效
                left = document.querySelector("#coural  .left"),
                right = document.querySelector("#coural  .right"),
                img = document.querySelector("#coural  img"),
                coural = document.querySelector("#coural"),
                index = 0;
            //改变数字样式及图片     
            function couralImg(index) {
                img.src = "./pic/" + arrImg[index];
                for (var i = 0, len = span.length; i < len; i++) {
                    span[i].className = "";
                }
                span[index].className = "active";
            }
            //图片轮播方法 
            function interval() {
                stop = setInterval(function () {
                    index++;
                    if (index == arrImg.length) index = 0;
                    couralImg(index);
                }, 1000)
            }
            //执行图片轮播
            interval();
           
            //鼠标移动到图片上时停止图片轮播
            coural.onmouseover = function () {
               clearInterval(stop);
            }
            //鼠标移除图片时开始I图片轮播
            coural.onmouseout = function () {
                interval();
            }
            //数字轮播
            for (var i = 0, len = span.length; i < len; i++) {
                span[i].onmouseover = function () {
                    index = this.innerHTML - 1;
                    couralImg(index);
                }
            }
            //顺时针图片轮播
            right.onclick = function () {
                index++;
                if (index == arrImg.length) index = 0;
                couralImg(index);
            }

            //逆时针图片轮播
            left.onclick = function () {
                index--;
                if (index == -1) index = arrImg.length-1;
                couralImg(index);
            }

        </script>


</body>

</html>