原生js轮播图

window.addEventListener(‘load’, function () {
// 1.获取元素
var arrow_l = document.querySelector(’.arrow-l’);
var arrow_r = document.querySelector(’.arrow-r’);
var focus = document.querySelector(’.focus’);
var focusWidth = focus.offsetWidth; // 把图片宽度设置为全局变量
// 2.鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener(‘mouseenter’, function () {
arrow_l.style.display = ‘block’;
arrow_r.style.display = ‘block’;
// 失去焦点就停止定时器
clearInterval(timer);
timer = null; // 因为已经停止定时器了，所以清除定时器变量
})
focus.addEventListener(‘mouseleave’, function () {
arrow_l.style.display = ‘none’;
arrow_r.style.display = ‘none’;
// 得到焦点开启定时器
timer = setInterval(function () {
// 手动调用点击事件
arrow_r.click();
}, 2000)
})
// 3.动态生成小圆圈 有几张图片 就有几个小圆圈
var ul = focus.querySelector(‘ul’); // 获取focus下的ul
var ol = focus.querySelector(’.circle’); // 获取focus下的小圆圈
for (var i = 0; i < ul.children.length; i++) {
// 创建小li
var li = document.createElement(‘li’);
// 记录当前小圆圈的索引号，通过自定义属性来获取
li.setAttribute(‘index’, i);
// 把小li插入到ol里面
ol.appendChild(li);
// 4.给小圆圈绑定点击事件
li.addEventListener(‘click’, function () {
// 干掉所有 把所有的小li 清除current 类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ‘’;
}
// 留下自己 当前的小li 设置current类名
this.className = ‘current’;
// 5.点击小圆圈，移动图片 当然移动的是ul
// ul的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
// 当我们点击了某个小li 就拿到当前小li的索引号
var index = this.getAttribute(‘index’);
// 当我们点击了某个小li 就要把这个li 的索引号给 num
num = index;
// 当我们点击了某个小li 就要把这个li 的索引号给 circle
circle = index;
// console.log(index);
// console.log(focusWidth);
animate(ul, -index * focusWidth);
})
}
// 把ol里面的第一个小li设置类名为 current
ol.children[0].className = ‘current’;
// 6.克隆第一张图片(li)放到ul最后面
var first = ul.children[0].cloneNode(true); // 参数为true是深克隆 可复制子节点
ul.appendChild(first);
// 7.点击右侧按钮，图片滚动一张
var num = 0; // 定义一个变量给图片标记
var circle = 0; // 控制小圆圈的播放
var flag = true; // 节流阀
// 节流阀的好处：防止点击按钮图片跳转过快，用了节流阀就会等图片显示完再显示另一张
// 复制第一张图片到ul的最后面，然后再判断 num == 图片的长度 -1 再把left改为0 就实现无缝跳转了
arrow_r.addEventListener(‘click’, function () {
// 如果走到了最后复制的一张图片 此时 我们的ul 要快速复原 left 改为0
if (flag) {
flag = false; // 关闭节流阀
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function () {
flag = true; // 利用回调函数，等执行完了再开启节流阀
}); // 值为 num 乘以 图片的宽度
// 8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
// 如果circle == 4 说明走到最后我们克隆的这张图片了 就复原 circle = 0
if (circle == 4) {
circle = 0;
}
// 调用函数
circleChange();
}
})
// 9.点击左侧按钮，图片滚动一张
arrow_l.addEventListener(‘click’, function () {
// 如果走到了最后复制的一张图片 此时 我们的ul 要快速复原 left 改为0
if (flag) {
flag = false; // 关闭节流阀
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + ‘px’;
}
num–;
animate(ul, -num * focusWidth,function(){
flag = true; // 利用回调函数，等执行完了再开启节流阀
}); // 值为 num 乘以 图片的宽度
// 8.点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle–;
// 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈(3)
if (circle < 0) {
circle = ol.children.length - 1;
}
// circle = circle < 0 ? ol.children.length - 1 : circle;
// 调用函数
circleChange();
}
})

//  封装一个函数
function circleChange() {
    //  先清除其余小圆圈的current类名
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
    }
    //  留下当前的小圆圈的current类名
    ol.children[circle].className = 'current';
}
//  10.自动播放轮播图
//  自动播放轮播图就相当于我们点击了右侧按钮跳转图片，所以我们手动调用了点击事件
var timer = setInterval(function () {
    //  手动调用点击事件
    arrow_r.click();
}, 2000)

})