【原生轮播图】

       *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 520px;
            height: 280px;
            margin: 40px auto ;
            position: relative;
        }
        .out{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .in{
            width: 2600px;
            height: 280px; 
        }
        .in>img{
            width: 520px;
            height: 280px;
            float: left;
        }
        ul{
            list-style: none;
            position: absolute;
            bottom: 10px;
            left: 0;
        }
        li{
            width: 30px;
            height: 8px;
            background-color: rgb(118, 115, 115);
            float: left;
            margin-left: 60px;
        }
        .ac{
            background-color: rgb(186, 223, 254);
        }

<div class="box">
        <div class="out">
            <div class="in">
                <img src="./img/per_1.jpg" alt="">
                <img src="./img/per_2.jpg" alt="">
                <img src="./img/per_3.jpg" alt="">
                <img src="./img/per_4.jpg" alt="">
                <img src="./img/per_5.jpg" alt="">
            </div>
            <ul>
                <li class="ac"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    //1、获取页面元素
    var img_=document.getElementsByTagName('img');
    var out_=document.getElementsByClassName('out')[0];
    var index=0; //起始图片的下标
    var li_=document.getElementsByTagName('li');
    var timer=null; //计时器 切换每一张图片
    var timer1=null;//每一张图片分成20步走完
    //2、轮播的函数
    function autoMove(){
        timer=setInterval(function(){
            index++;
            if(index>=img_.length){
                index=0;
            }
            //动起来
            var maxStep=20;
            var start=out_.scrollLeft;
            var end=img_[0].offsetWidth*index;
            var everyStep=(end-start)/maxStep;
            var step=0; //起始的第一步
            timer1=setInterval(function(){
                step++;
                if(step>=maxStep){
                    step=0;
                    clearInterval(timer1);
                }
                out_.scrollLeft +=everyStep;
            },20)
            //设置分页器
            for(var i=0;i<li_.length;i++){
                li_[i].className='';
            }
            li_[index].className='ac';
            li_[index].onclick=function(){
                clearInterval(timer);
            }
            li_[index].ondblclick=function(){
                autoMove();
            }
        },2000)
    }
    autoMove();