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中关于submit和button的区别介绍
Oct 20 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
原生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
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
js实现选项卡效果
2020/03/07 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python3抓取中文网页的方法
2015/07/28 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python实现动态创建类的方法分析
2019/06/25 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
一个入门级python爬虫教程详解
2021/01/27 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
优秀应届生求职信
2014/06/16 职场文书
面试通知短信
2015/04/20 职场文书
教师节老师寄语
2015/05/28 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技