JS轮播图制作

一、搭建html

 <div class="focus">
 //注：按钮是引入的图标，此处没有引入
                <!-- 1.左侧按钮 -->
                <a href="javascript:;" class="iconfont icon-jiantou-copy-copy arrow-l"></a>
                <!-- 2.右侧按钮 -->
                <a href="javascript:;" class="iconfont icon-iconfontxiangxia1copy19 arrow-r"></a>
                <!-- 3.核心的滚动区 -->
                <ul class="roll">
                    <!-- 需要手动调整ul的宽度，使得4个图片在一排显示,而不是给li添加 position: absolute; -->
                    <li><a href=""><img src="upload/focus.png" 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>
                <!-- 4.滚动的小圆圈 -->
                <ol class="circle">
                </ol>
            </div>

二、CSS设置样式

 .focus {
    position: relative;
    float: left;
    width: 721px;
    height: 455px;
    overflow: hidden;
   
}
 .focus ul {
    width: 600%;
    position: absolute;
}
.focus ul li {
    float: left;
}
 .focus .arrow-l,.arrow-r {
    position: absolute;
    display: none;
    top:50%;
    width: 24px;
    height: 40px;
    background-color: rgba(0,0,0,.3);
    line-height: 40px;
    text-align: center;
    z-index: 999;
}
 .focus .arrow-r {
    right:0;
}
 .circle {
    position: absolute;
    /* background-color: pink; */
    left:50%;
    bottom:20px;
    z-index: 999;
}
 .circle li {
    float: left;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(255,255,255,0.5);
    margin-right: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 10px;
   
    
}
.current {
    background-color: #fff;
}

三、JS部分

小需求太多，写的时候有点被绕晕了

window.addEventListener("load", function () {
    //1.获取元素
    var arrow_l = document.querySelector(".arrow-l");
    var arrow_r = document.querySelector(".arrow-r");
    var roll_lis = document.querySelector(".roll").querySelectorAll('li');
    // var circle_lis = document.querySelector(".circle").querySelectorAll('li'); 动态生成小圆圈
    var circle = document.querySelector(".circle");
    var focus = document.querySelector(".focus");
    var ul = document.querySelector('.roll');
    var ol = document.querySelector('ol');//选择li的父亲，不是focus 
    /* 需求分析 
        (1)鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
        (2)点击右侧按钮一次，图片往左播放一张，点击左侧按钮，图片往右播放一张
        (3)图片播放的同时，下面小圆圈模块跟随一起变化
        (4)点击小圆圈，可以播放相应图片
        (5)鼠标不经过轮播图，轮播图也会自动播放图片
        (6)鼠标经过轮播图模块，自动播放停止
    */
    //2.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
    focus.addEventListener('mouseenter', function () {
        arrow_r.style.display = 'block';
        arrow_l.style.display = 'block';
        clearTimeout(timer);
        timer = null;//清除定时器变量
    });
    focus.addEventListener('mouseleave', function () {
        arrow_r.style.display = 'none';
        arrow_l.style.display = 'none';
        timer = setInterval(function () {
            arrow_r.click();
        }, 2000);
    });
    /* 3.动态生成小圆圈
        思路：首先得到ul里面的图片张数，再利用循环动态生成小圆圈，最后把小圆圈放进ol 
    */
    var each_width = focus.offsetWidth;//图片每次走的距离，放在外面定义，下面还要用
    for (var i = 0; i < roll_lis.length; ++i) {
        var li = document.createElement('li');
        //7.设置小圆圈的自定义属性
        li.setAttribute('index', i);
        ol.appendChild(li);
        //5.在生成小圆圈的同时，就绑定点击事件
        //小圆圈排他思想：点击当前小圆圈，就添加current
        li.addEventListener('click', function () {
            for (var j = 0; j < ol.children.length; ++j) {
                ol.children[j].className = '';
            }
            this.className = 'current';
            //6.点击小圆圈轮播图进行滚动
            /* 分析：引入动画文件，使用动画函数的前提，该元素必须有定位（给ul加） 
                   是ul来进行滚动，不是li,核心算法：点击某个小圆圈，就让图片滚动，
                   ul移动的距离：小圆圈的索引号*图片宽度
                   此时需要知道小圆圈的索引号：可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性即可
            */
            //当点击这这个li,就拿到了它的索引号
            var index = this.getAttribute('index');
            //11.需要把index的值赋给num，避免bug:如果你一会儿点击小圆圈，一会儿点击按钮更换轮播图，此时num和circle不能及时更新
            num = index;
            circle = index;
            animation(ul, -each_width * index);
        })
    };
    //4.将ol的第一个li的类设为current,底色白色,可以省略
    ol.children[0].className = "current";
    //8.根据9的分析，需要把li里面的第一张图片复制一份
    var tem = roll_lis[0].cloneNode(true);
    ul.appendChild(tem);
    //9.点击右侧按钮一次，图片往左播放一张，点击左侧按钮，图片往右播放一张
    //就是ul走
    var num = 0;
    var circle = 0;//控制小圆圈跟着图片走
    /* 
    图片无缝滚动原理：
    把ul 第一个li复制一份，放到ul的最后面
    当图片滚动到克隆图片的最后一张时，让ul快速的不做动画的跳到最左侧，同时num赋值为0
    克隆思路：深克隆，加到ul最后面
     */
    //10.点击右侧按钮，小圆圈跟随一起变化
    //15.节流阀flag制作
    var flag = true;
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false;//关闭节流阀
            if (num == roll_lis.length) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animation(ul, -each_width * num, function () {
                flag = true;//打开节流阀
            });
            circle++;

            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }

    });
    //12.点击左侧按钮，小圆圈跟随一起变化
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = roll_lis.length;
                ul.style.left = -(num * each_width) + 'px';
            }
            num--;
            animation(ul, -each_width * num, function () {
                flag = true;
            });
            circle--;
            /*  if (circle < 0) {
                 circle = ol.children.length - 1;
             } */
            circle = circle < 0 ? ol.children.length - 1 : circle;

            circleChange();
        }
    });
    function circleChange() {
        //排他思想给小圆圈设置类名,封装成一个方法
        for (var i = 0; i < ol.children.length; ++i) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    };
    //13.自动播放轮播图(手动调用右侧按钮点击事件)

    var timer = setInterval(function () {
        arrow_r.click();
    }, 2000);
    //14.当鼠标经过图片上，停止自动播放，鼠标离开图片，再开启定时器，在第二步里面做

})