js代码实现轮播图


Posted in Javascript onMay 04, 2020

本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下

又从头到尾把轮播图研究了一遍,感觉理解更深刻了。
就怕自己搞不懂,分析了各个步骤的思路,为啥用,怎么用。
总算搞清楚了。
话不多说,干货奉上.

效果图:

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 关闭节流阀 关闭的定时器 点击按钮无效 停止播放图片
//给按钮点击事件安装节流阀

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
手机端转换rem适应
Apr 01 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
原生js实现轮播图特效
May 04 #Javascript
jquery实现手风琴案例
May 04 #jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 #Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 #Javascript
vue自定义标签和单页面多路由的实现代码
May 03 #Javascript
JavaScript函数重载操作实例浅析
May 02 #Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 #Javascript
You might like
神族 Protoss 剧情介绍
2020/03/14 星际争霸
基于mysql的bbs设计(二)
2006/10/09 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
打包发布Python模块的方法详解
2016/09/18 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python中psutil的介绍与用法
2019/05/02 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Python threading的使用方法解析
2019/08/28 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
信用社实习人员自我鉴定
2013/09/20 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
移交协议书
2014/08/19 职场文书
业务员辞职信范文
2015/03/02 职场文书
初一语文教学反思
2016/03/03 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python