纯原生js实现轮播图 左右滚动

纯原生js实现轮播图 无缝左右滚动 点击 自动播放
实现效果 自动向右切换 动画效果缓冲 点击阻断 左右点击快速切换 点击小圆圈定向切换
1.先看效果图

2.html代码

<div class="focus fl">
                <!-- 左侧按钮 -->
                <a href="javascript:;" class="arrow-l">
                    &lt;
                 </a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="arrow-r">  </a>
                <!-- 核心的滚动区域 -->
                <ul>
                    <li>
                        <a href="#"><img src="upload/focus.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus3.jpg" alt=""></a>
                    </li>
                </ul>
                <!-- 小圆圈 -->
                <ol class="circle">

                </ol>
            </div>

3.css代码

.focus {
    position: relative;
    width: 721px;
    height: 455px;
    background-color: purple;
     overflow: hidden; 
}

.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}

.focus ul li {
    float: left;
}

.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
}

.arrow-r {
    right: 0;
}

.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}

.current {
    background-color: #fff;
}

4.js代码

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}





window.addEventListener('load', function () {
    let focus = document.querySelector(".focus")
    let arrowleft = document.querySelector(".arrow-l")
    let arrowright = document.querySelector(".arrow-r")
    let circle = document.querySelector(".circle")
    let flag=true
    focus.addEventListener("mouseenter", function () {
        arrowleft.style.display = "block"
        arrowright.style.display = "block"
        clearInterval(timer)

    })
    focus.addEventListener("mouseleave", function () {
        arrowleft.style.display = "none"
        arrowright.style.display = "none"
         timer=setInterval(function(){
            arrowright.click()
        },2000)
    })
    //动态生成小圆圈
    let num = 0
    let cir=0;
    let ul = focus.querySelector('ul')
    li = ul.querySelectorAll('li')
    
    for (let i = 0; i < li.length; i++) {

        let oli = document.createElement('li')
        oli.setAttribute('index', i)
        oli.addEventListener('click', function () {
            //干掉所有
            for (let index = 0; index < li.length; index++) {
                circle.children[index].className = ""

            }
            this.className = "current"
           cir= num=this.getAttribute('index')
            //移动图片
            animate(ul, -(this.getAttribute('index') * focus.offsetWidth))

        })
        circle.appendChild(oli)
    }
    circle.children[0].className = 'current'
    ul.appendChild(li[0].cloneNode(true))
 
    arrowleft.addEventListener("click", function () {
          //图片往左推一张

          if(flag){
             flag=false
           if (num ==0 ) {
            ul.style.left =  -(ul.children.length-1)*focus.offsetWidth+'px'
            num = ul.children.length-1
        } 
        num--
        animate(ul, -num * focus.offsetWidth,changeFlag)
        cir--
        cir=cir<0?circle.children.length-1:cir
        changeCircle()
    }
     
    })

    arrowright.addEventListener("click", function () {
        
          //图片往左推一张
          if(flag){
              flag=false
          if (num == li.length - 1) {
            ul.style.left = 0
            num = 0
        }
        num++
        animate(ul, num * -focus.offsetWidth,changeFlag)
        cir++
        cir=cir==li.length?0:cir
        changeCircle()
    }


    })
    function changeFlag(){
        flag=true
    }
    function changeCircle(){
        for (let index = 0; index < li.length; index++) {
            circle.children[index].className = ""

        }
        circle.children[cir].className="current"
    }
    var timer=setInterval(function(){
        arrowright.click()
    },2000)
    


})