原生Js实现图片轮播

html

 <div class="container">
        <div class="list" style='left:-500px;'>
            <img src="img/6.png" alt="">
            <img src="img/1.png" alt="">
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
            <img src="img/5.png" alt="">
            <img src="img/6.png" alt="">
            <img src="img/1.png" alt="">
        </div>
        <div class="buttons">
            <span index='1' class="on"></span>
            <span index='2'></span>
            <span index='3'></span>
            <span index='4'></span>
            <span index='5'></span>
            <span index='6'></span>
        </div>
        <a href="#" class="prev control">
            <</a>
                <a href="#" class="next control">></a>
    </div>

css

 * {
            padding: 0;
            margin: 0;
            text-decoration: none;
        }

        .container {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            overflow: hidden;
            cursor: pointer;
            
        }

        .list {
            position: absolute;
            z-index: 1;
            width: 4000px;
            height: 500px;
        }

        .list img {
            width: 500px;
            height: 500px;
            float: left;
        }

        .buttons {
            position: absolute;
            bottom: 20px;
            z-index: 50;
            height: 10px;
            /*width: 100px;*/
            left: 50%;
            transform: translate(-50%, 0);
        }

        .buttons span {
            margin: 0 8px;
            border-radius: 50%;
            height: 10px;
            width: 10px;
            background-color: #fff;
            border: 1px solid #000;
            float: left;
            cursor: pointer;
            /*display: inline-block;*/
        }

        .control {
            position: absolute;
            top: 50%;
            z-index: 100;
            width: 50px;
            height: 50px;
            font-size: 30px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, .5);
            cursor: pointer;
            transform: translate(0, -50%);
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }
        .buttons span.on{
            background-color:orange;
        }

js

var list = document.querySelector('.list'),
            next = document.querySelector('.next'),
            prev = document.querySelector('.prev');
        var index = 1;
        var buttons = document.querySelectorAll('span');
        
        function init() {      
            buttons.forEach(function (item) {
                if (item.className === 'on') {
                    item.className = '';
                }
            })
            buttons[index - 1].className = 'on';
        }
        init();
        function animate(offset) {
            var newLeft = parseInt(getComputedStyle(list)['left']) + offset;
            list.style.left = newLeft + 'px';
            if (newLeft < -3500) {
                list.style.left = '-500px';
            }
            if (newLeft > -500) {
                list.style.left = '-3500px';
            }
        }
        prev.onclick = function () {
            index--;
            if(index<1){
                index = 6;
            }
            init();
            animate(500);
        }
        next.onclick = function () {
            index++;
            if(index>6){
                index = 1;
            }
            init();
            
            animate(-500);
        }


        //自动切换
        var timer;
        function play() {
            timer = setInterval(function () {
                next.onclick();
            }, 1000)
        }
        play();
        //移入清除定时器
        var container = document.querySelector('.container');
        function stop() {
            clearInterval(timer);
        }
        container.addEventListener('mouseover', function () {
            stop();
        })
        //移出设置定时器
        container.addEventListener('mouseout', function () {
            play();
        })
       
        buttons.forEach(function(item){
           item.addEventListener('click',function(){
               var thisIndex =parseInt(item.getAttribute('index'));
               var offset= 500*(index-thisIndex);
                    animate(offset);
                     index = thisIndex;
                     init();
           })
        })