【轮播图封装】‘无缝隙滚动’，‘节流阀’，‘动画函数封装’，‘动态生成圆点’

1.HTML代码：

 <div class="slider">
        <!--图片-->
        <ul class="img-ul">
            <li><a href="#"><img src="" ></a></li>
            <li><a href="#"><img src="" ></a></li>
            <li><a href="#"><img src="" ></a></li>
            <li><a href="#"><img src="" ></a></li>
            <li><a href="#"><img src="" ></a></li>
        </ul>
        <!--滚动按钮-->
        <button class="arrow-l">〈&nbsp;&nbsp;</button>
        <button class="arrow-r">&nbsp;&nbsp;〉</button>
        <!--圆点-->
        <ol class="circle">
        </ol>

    </div>

2.CSS代码：

.slider {
      width: 520px;
      height: 280px;
      margin: 50px auto;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
    }
    .img-ul {
        list-style: none;
        width: 660%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .img-ul li {
        float: left;
        display: block;
    }


    .img-ul img {
        width: 520px;
        height: 280px;

    }

    .arrow-l,
    .arrow-r {
        border: 0;
        width: 28px;
        height: 28px;
        background-color: rgba(0,0,0,0.1);
        position: absolute;
        top:50%;
        color: white;
        line-height: 28px;
        text-align-all: center;
    }
    .arrow-l:hover,
    .arrow-r:hover {
        background-color: rgba(0,0,0,0.5);
        cursor: pointer;
    }
    .arrow-l {
        left: 0;
        border-radius:  0 14px 14px 0;
    }
    .arrow-r {
        right: 0;
        border-radius:  14px 0 0 14px;
    }
    

3.JavaStyle代码：

/**动画函数封装 animate(obj,target,callback);
        obj:移动元素
        target:目标位置
        callback:回调函数，不需要的时候可以不传
 * */

    function animate(obj,target,callback) {
        clearInterval(obj.timer);//先清理定时器
        obj.timer = setInterval(function (){
            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();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        },26)
    }
//--------------------------------------------------------------------
    /**
     * 轮播图
     */
    var arrow_l = document.querySelector('.arrow-l');//小镜头按钮
    var arrow_r = document.querySelector('.arrow-r');//小镜头按钮
    var imgUl =  document.querySelector('.img-ul');//图片ul
    var imgUls =  imgUl.querySelectorAll('li');//图片li组
    var  imgWidth = imgUls[0].children[0].offsetWidth;//图片宽度
    
/**
     *动态生成小圆点
     * */
    var ol = document.querySelector('.circle');
    for(var i = 0; i < imgUls.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index',i);//自定义属性，index
        ol.appendChild(li);
        //生成圆点的同时绑定点击事件
        li.addEventListener('click',function () {
            //排他思想，实现小圆圈变色
            for(var i = 0;i < ol.children.length; i++ ) {
                ol.children[i].style.backgroundColor = 'rgba(255,255,255,0.3)';
            }
            this.style.backgroundColor = 'rgba(255,255,255,1)';
            
            /**点击小圆圈，移动图片
             * imgWidth 图片宽度，index 序号
             * 移动距离 -(imgWidth * index)*/
            var index = this.getAttribute('index');
            //点击后把index给num；实现同步
            num = index;
            //同理
            circle = index;
            animate(imgUl,-(imgWidth * index));//animate 封装的动画函数
        })
    }
    var lis = document.querySelector('.circle').querySelectorAll('li');//小圆点li组
    lis[0].style.backgroundColor = 'rgba(255,255,255,1)';

    /**
     * 小箭头按钮绑定事件
     * */
    //先克隆第一张图片（li），放到ul的最后面,实现无缝滚动
    var first = imgUl.children[0].cloneNode(true);//true：深克隆，添加节点；false:浅克隆，不添加节点
    imgUl.append(first);//克隆的节点放到ul
    /**
     * flag控制节流阀。实现：不能快速频繁点击，只能在上一个动画播放完成才能点击再下一次开始
     * */
    var flag = true;
    var num = 0;//图片序号
    var circle = 0 ;//控制小圈子的播放
    /**
     * 左按钮点击事件*/
    arrow_r.addEventListener('click',function () {
        if(flag){
            flag = false;//关闭节流阀
            if(num == 0){
                num = imgUls.length;
                imgUl.style.left = (-(num * imgWidth)) +'px';
            }
            num--;
            animate(imgUl,-(num*imgWidth),function (){
                flag = true;//打开节流阀
            });
            if(circle == 0) {
                circle = imgUls.length;
            }
            circle--;
            circleChange(circle);
        }
    })
    // 右按钮点击事件
    arrow_l.addEventListener('click',function () {
       if(flag){
           flag = false;
           if(num == imgUls.length){
               num = 0 ;
               imgUl.style.left = num;
           }
           num++;
           animate(imgUl,-num*imgWidth,function (){
               flag = true;//打开节流阀
           });
           //-----------------------------
           circle++;
           if(circle == ol.children.length){
               circle = 0 ;
           }
           circleChange(circle);
       }
    })

    /**
     * 自动播放模块*/
    var timer  = setInterval(function () {
        //手动调用右侧按钮的点击事件
        arrow_r.click();
    },2000)
    //鼠标经过关闭定时器
    imgUl.addEventListener('mouseenter',function (){
        clearInterval(timer);
        timer = null;
    })
    //鼠标离开开启定时器
    imgUl.addEventListener('mouseleave',function (){
        timer  = setInterval(function () {
            arrow_r.click();
        },3000)
    })
//-------------------------------------------------------------------------
    /**小圆圈播放函数封装
     * */
    function circleChange(num){
        for(var i = 0;i < ol.children.length;i++) {
            ol.children[i].style.backgroundColor = 'rgba(255,255,255,0.3)';
        }
        ol.children[num].style.backgroundColor = 'rgba(255,255,255,1)';
    }