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 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
Vue.js动态组件解析
Sep 09 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
JS返回顶部实例代码
Aug 09 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 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
摩卡咖啡
2021/03/03 咖啡文化
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php生成zip文件类实例
2015/04/07 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
本科生求职信
2014/06/17 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
太行山上观后感
2015/06/05 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS