js代码实现轮播图

Z时代
2024-01-10
分类：综合
本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下
又从头到尾把轮播图研究了一遍，感觉理解更深刻了。
就怕自己搞不懂，分析了各个步骤的思路，为啥用，怎么用。
总算搞清楚了。
话不多说，干货奉上.
效果图：

//1，左右按钮初始隐藏 鼠标进入box 按钮显示 鼠标离开box 按钮隐藏
//获取元素
var box = document.getElementById('box');
var leftbtn = document.getElementById('leftbtn');
var rigbtn = document.getElementById('rigbtn');
//因为图片宽度是多个事件需要用到 所以要定义为全局变量
var pic_width = box.clientWidth;
//注册事件
box.addEventListener('mouseenter', function() {
 leftbtn.style.display = 'block';
 rigbtn.style.display = 'block';
 //清除定时器 停止自动播放 
 clearInterval(timer);
 //停止播放后 清空定时器变量 提升运行效率
 timer = null;
});
box.addEventListener('mouseleave', function() {
 leftbtn.style.display = 'none';
 rigbtn.style.display = 'none';
 //timer在11条里声明过了 这里就不需要再加var进行声明了
 timer = setInterval(function() {
 rigbtn.click();
 }, 1500);
});
//6，创建动画函数animate 点击小圆点 图片会移动 
//因为图片需要缓慢移动到目标位置 而不是瞬移 所以需要让动画函数带缓动效果
function animate(obj, target, callback) {
 //obj是移动的对象 target是移动的目标位置 callback是回调函数
 clearInterval(obj.timer);
 //创建缓动函数 缓动的核心思想就是把移动到目标位置的距离分成若干小步
 //一定时间内走一小步，让这个距离在若干时间完成若干小步后走完
 function move() {
 //定义每一小步走的距离 把一次移动到目标位置的距离分为10份
 //每一份就是一个step
 var step = (target - obj.offsetLeft) / 10;
 //step可能不是整数 导致最终移动距离有误差 
 //所以要把每一步的step变成整数
 //如果step是正数 就取大于step的最小整数
 //如果step是负数 就取小于step的最大整数 用Math()的知识
 /*if(step > 0) {
 step = Math.ceil(step);//向上取整
 } else {
 step = Math.floor(step);//向下取整
 }*/
 //可以将上面的if else语句简化为三元运算符
 step = step > 0 ? Math.ceil(step) : Math.floor(step);
 //如果走到了目标位置 就清除定时器
 if(obj.offsetLeft == target) {
 clearInterval(obj.timer);
 //因为回调函数是定时器结束后再调用函数 
 //所以这里清除定时器后 需要判断一下是否有回调函数 有就调用 没有就不调用
 /*if(callback) {
 callback();
 }*/
 //上面的判断语句可以简化为
 callback&&callback();
 }
 //把每一小步移动的距离和offsetLeft之和，给obj的left值
 //注意，这里obj.style.left对应的是数值+像素单位，一定不要忘了+'px'
 obj.style.left = obj.offsetLeft + step + 'px';
 }
 //给obj创建专属的定时器 
 //用定时器实现一定时间走一小步的结果 这里是40毫秒移动一个step的距离
 //注意，专属定时器不需要用var了 
 obj.timer = setInterval(move, 40);
}
//2，动态添加小圆点 图片的数量就是小圆点的个数
//获取元素
var ul01 = document.getElementById('ul01');
var ul02 = document.getElementById('ul02');
//添加多个li 用for循环 
for(var i = 0; i < ul01.children.length; i++) {
 //创建元素creLi
 var creLi = document.createElement('li');
 //3，创建自定义属性data-index 用来获取小圆点的索引号
 creLi.setAttribute('data-index', i); 
 //添加元素
 ul02.appendChild(creLi);
 //4,当前点击的小圆点 颜色发生变化 创建类urrent
 //因为图片默认开始显示第一张 所以先让第一个小圆点小时current类
 ul02.children[0].className = 'current';
 //5，给小圆点创建点击事件 点击小圆点 当前点击的小圆点变色
 //用排他思想 for循环
 //注册点击事件
 creLi.addEventListener('click', function() {
 //干掉所有人
 for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 //留下我自己
 this.className = 'current';
 //7，点击小圆点 图片跟着动 调用动画函数
 //分析 点击圆点1 图片向左移动0个图片的宽度box.clientWidth
 //点击圆点2 图片向左移动1个图片的宽度 以此类推
 //图片移动的距离 就是 当前被点击圆点的索引号乘以图片的宽度
 //获取自定义属性 当前被点击的小圆点的索引号
 var index = this.getAttribute('data-index');
 num = index;
 circle = index;
 animate(ul01, -index*pic_width);
 });
}
//8，右侧按钮
//8.1 点击右侧按钮 图片向左移动
//点击1次 图片向左移动1个图片宽度 显示图片2
//点击2次 向左移动2个图片宽度 显示图片3 以此类推
//当显示到第3张图片即最后一张图片时 再点击右侧按钮 会显示空白
//重点： 实现无缝链接，即当显示到最后一张图片时 再点击右侧按钮 会显示图片1
//怎么做 在图片3后面克隆一张图片1
//显示图片3时 再点击按钮 ul01继续向左移动 显示图片1
//然后迅速跳转到跳转到图片1 让ul01.style.left归零
//设置次数变量num
var num = 0;
//克隆图片1 先克隆 再添加 注意 克隆图片也是全局事件 不是局部的
var liCopy = ul01.children[0].cloneNode(true)//深克隆
ul01.appendChild(liCopy);//添加新的li后，注意取css里修改ul01的宽度
//console.log(ul01.children.length); 元素个数变成了4
//获取元素rigbtn
var rigbtn = document.getElementById('rigbtn');
//给按钮点击事件安装节流阀
var flag = true; //左右按钮都要用 所以设置全局变量
//注册点击事件
rigbtn.addEventListener('click', function() {
 if(flag) {
 //初始状态 先把节流阀关了 让自动播放的图片播放完一张图片前 点击按钮无效
 flag = false;
 //先做个判断 
 //点击第2次的时候 显示图片3 再点击 就显示克隆的图片1 
 //这时候 让ul01位置归零 让num的值归零以便从头开始
 if(num == ul01.children.length - 1) {
 ul01.style.left = 0;
 num = 0;
 }
 //点击1次 移动距离就是1*pic_width
 //点击1次 让num自增1
 num++;
 //注意 这里如果先自增 再做判断
 //会出现一个bug 就是当再次显示图片1时 点击无效 重新点击才会显示图片2
 //因为点击第三次时 本来应该跳转到图片1的 结果num被归零了 再点击还是显示图片1
 //调用动画函数
 animate(ul01, -num*pic_width, function() {
 //function(){}是回调函数
 //动画结束一个动作后 即播放完该图片后 再回头打开节流阀 让下一次点击生效
 flag = true;
 });
 circle++;
 if(circle == ul02.children.length) {
 circle = 0;
 }
 //因为这段排他思想的小圆点代码重复使用 所以可以封装成一个函数进行调用
 /*for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 ul02.children[circle].className = 'current';*/
 cir();
 }
}); 
function cir() {
 for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 ul02.children[circle].className = 'current';
}
//9，点击按钮 图片移动 小圆点跟着移动 点击小圆点 图片跟着移动 num次数也变化
//让图片 小圆点 按钮次数 一起变化的核心 就是图片动 num变化 小圆点当前的current类发生变化
//即 图片移动 当前小圆点变色 点击按钮 当前小圆点变色
//当前小圆点变色 图片移动 按钮次数发生变化 num index 图片距离 一起变化 
//但是index是局部变量 怎么让三者绑定呢
//就要重新创建一个全局变量 代替index 作为小圆点当前的索引号 让三者绑定
var circle = 0;
//10，点击左侧按钮
//和右侧按钮点击事件的代码基本相同 但是方向相反 需要修改一些数据
//直接把右侧按钮点击事件的代码复制过来 然后修改数据
//获取元素leftbtn
var leftbtn = document.getElementById('leftbtn');
//注册点击事件
leftbtn.addEventListener('click', function() {
 //同理，给左侧按钮也加个节流阀
 if(flag) {
 flag = false;
 //先做个判断 
 //开始时 未点击 num为0
 if(num == 0) {
 num = ul01.children.length-1;
 ul01.style.left = -num*pic_width + 'px';
 }
 //点击左侧按钮时 num自减
 num--;
 animate(ul01, -num*pic_width, function() {
 flag = true;
 });
 circle--;
 if(circle < 0) {
 circle = ul02.children.length - 1;
 }
 //因为这段排他思想的小圆点代码重复使用 所以可以封装成一个函数进行调用
 /*for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 ul02.children[circle].className = 'current';*/
 cir();
 }
});
//11，图片自动播放 相当于每隔一定时间 用定时器调用点击右侧按钮的时间 
var timer = setInterval(function() {
 rigbtn.click();
}, 1500);
//12，鼠标进入box 停止自动播放 鼠标离开box 继续自动播放
//13，节流阀 控制图片播放的频率
//当前 快速点击按钮 图片高速播放 timer定时器还没执行结束 就开始播放下一张图片了
//用flag控制 flag为true 打开节流阀 启用定时器 播放图片
//flag为false 关闭节流阀 关闭的定时器 点击按钮无效 停止播放图片
//给按钮点击事件安装节流阀