本文实例为大家分享了JS实现轮播图小案例的具体代码，供大家参考，具体内容如下
分析：
- 点击左右箭头 滑动轮播图
- 鼠标不在轮播图内时 每隔2秒自动滑动轮播图
- 鼠标移入时 停止自动滑动轮播图
- 点击小圆圈 显示对应的轮播图
1、鼠标移入、移出显示或隐藏左右箭头：
// 获取左右箭头的元素
let arrow_l = this.document.querySelector('.arrow-l');
let arrow_r = this.document.querySelector('.arrow-r');
// 获取到轮播图盒子元素
let focus = this.document.querySelector('.focus');
// 轮播图盒子添加鼠标移入移出事件 显示或隐藏 左右箭头
focus.addEventListener('mouseenter', function(e) {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
// 鼠标移入的时候清除定时函数，不再自动滑动轮播图
clearInterval(timer);
timer = null;
});
focus.addEventListener('mouseleave', function(e) {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
// 鼠标移出 添加定时任务，每2秒来触发一次点击右箭头的点击
timer = setInterval(function() {
arrow_r.click();
}, 2000);
})2、添加ol内的li标签：
// 获取到ul列表（轮播图列表）和ol列表 （小圆圈列表）元素
var ul = focus.querySelector('ul');
// 此时ol列表内没有元素
var ol = focus.querySelector('.circle');
// 循环轮播图列表 有多少张轮播图就添加多少个小圆圈
for (var i = 0; i < ul.children.length; i++) {
// 创建li标签
var li = this.document.createElement('li');
// 给li标签添加自定义属性 为轮播图的下标 用于
li.setAttribute('l-index', i);
// ol标签添加li标签
ol.appendChild(li);
// 每一个li标签添加点击函数
li.addEventListener('click', function() {
// 清除所有小圆圈的样式
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].className = '';
}
// 点击哪一个小圆圈 就添加样式
this.className = 'current';
// 点击小圆圈 更改num和circl 来更换轮播图
num = this.getAttribute('l-index');
circl = this.getAttribute('l-index');
// 动画效果
animate(ul, -num * focusWidth);
})
}3、复制第一张轮播图到ul的最后，显得轮播图更自然，添加记录轮播图的下标和记录小圆圈的下标，添加节流阀：
节流阀：
添加一个节流阀 默认为true 如果点击之后立即改为false 如果没处理完上次点击的事件 这个时间内的点击事件不再处理
类似一个锁，当锁住的时候只做一件事，别的点击不会再做，等什么时候开了锁，什么时候才可以做。
// 克隆一个第一张轮播图的节点添加到ul内
// 播放到最后一个的时候 转到第一个看着有连贯性
ol.children[0].className = 'current';
let cloneLi = ul.children[0].cloneNode(true);
ul.appendChild(cloneLi);
// 添加一个下标 来记录轮播图播放到了第几张
num = 0;
// 与num类似，记录小圆圈的下标
circl = 0;
// 添加节流阀
flag = true;4、右箭头、左箭头的点击事件和小圆圈更改样式：
// 点击右箭头的 点击事件
arrow_r.addEventListener('click', function(e) {
// 添加一个节流阀 默认为True 如果点击之后立即改为false 如果没处理完上次点击的事件 这个时间内的点击事件不再处理
if (flag) {
// 改变节流阀的状态
flag = false;
// 如果num下标为最后一张 就恢复到第一张 把num下标改为默认0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
// num下标加1
num++;
// 改变动画效果 滑动到 第几张轮播图 * 一张的宽度 的距离
animate(ul, -num * focusWidth, function() {
// 回调函数设置节流阀为true 可以再次点击
flag = true;
});
// 小圆圈+1
circl++;
// 如果小圆圈到了最后一个 恢复为0
if (circl == ul.children.length - 1) {
circl = 0;
}
// 改变小圆圈的样式
circlChange();
}
})
// 左箭头的点击事件
arrow_l.addEventListener('click', function(e) {
if (flag) {
flag = false;
// 判断为0时说明是从第一张开始往左点
if (num == 0) {
// 更改num下标为最后一个
num = ul.children.length - 1;
// 更改轮播图为最后一个
ul.style.left = -num * focusWidth + 'px';
}
// num -1
num--;
// 动画效果
animate(ul, -num * focusWidth, function() {
flag = true;
});
// 如果小圆圈为0 说明到了第一个轮播图
if (circl == 0) {
// 小圆圈到最后一个
circl = ul.children.length - 1;
}
// 小圆圈-1
circl--;
// 改变小圆圈的样式
circlChange();
}
})
function circlChange() {
// 遍历ol列表 删除每一个小圆圈的样式
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
};
// 给当前circl下标的小圆圈添加样式
ol.children[circl].className = 'current';
}5、轮播图动画函数的封装：
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);
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
