JavaScript实现动态轮播图效果
功能描述:
1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏
2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步
3.拷贝第一张图片添加到ul最后可以实现动态添加图片
4.给箭头绑定单击事件,并且使图片可以无缝轮播
5.实现自动轮播(动画函数)
代码实现:
1.鼠标移入左右侧箭头显示,鼠标离开箭头隐藏
1 con.addEventListener('mouseenter', function() { 2 arrow_l.style.display = 'block'; // 将左右箭头的display设为block 3 arrow_r.style.display = 'block'; 4 }); 5 con.addEventListener('mouseleave', function() { 6 arrow_l.style.display = 'none'; // 将左右箭头display设为none 7 arrow_r.style.display = 'none'; 8 });
2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步
1 for(var i = 0; i < ul.children.length; i++) { 2 var li = document.createElement('li'); 3 li.setAttribute('index', i); // 通过添加自定义属性来记录小圆圈索引号 4 ol.appendChild(li); // 将创建的li添加进ol里 5 // 生成小圆圈的同时就可以给它绑定单击事件 6 li.addEventListener('click', function() { 7 // 排他思想 干掉所有人,留下我自己 8 for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圆圈改为未选中状态 9 ol.children[i].className = ''; 10 } 11 // 再把当前小圆圈改为选中状态 12 this.className = 'current'; 13 var index = this.getAttribute('index'); // 获取当前小圆圈的索引 14 // 将index值赋值给num以及circle,将小圆圈的点击事件和左右箭头点击事件同步 15 num = index; 16 circle = index; 17 animate(ul, - index * conWidth); 18 }) 19 }
3.拷贝第一张图片添加到ul最后可以实现动态添加图片
1 // 克隆第一张图片 2 var first = ul.children[0].cloneNode(true); // true 深拷贝 3 ul.appendChild(first); // 拷贝第一张图片添加到ul最后
4.给箭头绑定单击事件,并且使图片可以无缝轮播
①右侧箭头的单击事件
1 var num = 0; // 用来存储点击后图片序号 2 var circle = 0; // 用来存储点击后小圆圈序号 3 var flag = true; // flag 节流阀 防止用户点击过快 图片播放太快 4 // 右侧箭头点击播放 5 arrow_r.addEventListener('click', function() { 6 if(flag) { 7 // 点击后先关闭节流阀 8 flag = false; 9 // 如果播放到了最后一张,就把left直接值设为0从头播放,同时还原num 10 if(num == ul.children.length - 1) { 11 ul.style.left = 0; 12 num = 0; 13 } 14 num++; 15 animate(ul, - num * conWidth, function() { 16 // 回调函数 动画执行完后开启节流阀 17 flag = true; 18 }); 19 // 小圆圈和箭头一起变化 20 circle++; 21 /* if(circle == ol.children.length) { 22 circle = 0; 23 } */ 24 // 可以用三元运算符判断小圆圈是否到了最后一个,如果是最后一个就还原circle 25 circle == ol.children.length ? circle = 0 : circle; 26 circleChange(); // 使当前小圆圈为选中状态(重复代码封装到一个函数里了) 27 } 28 })
②左侧箭头的单击事件
1 arrow_l.addEventListener('click', function() { 2 if(flag) { 3 // 首先关闭节流阀 4 flag = false; 5 // 如果播放到了第一张,就把left值设为最后一张的值 6 if(num == 0) { 7 num = ul.children.length - 1; 8 ul.style.left = - num * conWidth + 'px'; 9 } 10 num--; 11 animate(ul, - num * conWidth, function() { 12 flag = true; 13 }); 14 // 小圆圈和箭头一起变化 15 circle--; 16 // 三元表达式 circle < 0 时说明是第一张图片,将小圆圈改为第四个(索引为3) 17 circle < 0 ? circle = ol.children.length - 1 : circle; 18 circleChange(); 19 } 20 })
circleChange();函数代码
1 // 小圆圈的选中状态(相同代码可以封装为一个函数,使代码更简洁) 2 function circleChange() { 3 // 排他思想 4 for(var i = 0; i < ol.children.length; i++) { 5 ol.children[i].className = ''; 6 } 7 ol.children[circle].className = 'current'; 8 }
5.实现自动轮播(动画函数)
1 // 自动播放轮播图,相当于隔一段时间调用一次右侧箭头点击事件 2 var timer = setInterval(function() { 3 // 手动调用点击事件 4 arrow_r.click(); 5 }, 2000);
动画函数 animate.js(ps:我没有把这个写入下边index.js里,这个要你自己弄进去哦,可以作为animate.js文件引入进去或者直接粘贴到你的js代码里边)
1 // obj 动画对象 2 // target 目标位置 3 // callback 回调函数 4 function animate(obj, target, callback) { 5 clearInterval(obj.timer); 6 obj.timer = setInterval(function() { 7 var step = (target - obj.offsetLeft) / 10; // step步长值 8 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 大于零向上取整,小于零向下取整 9 if(obj.offsetLeft == target) { 10 clearInterval(obj.timer); 11 // if(callback) { // 判断是否传了回调函数 12 // callback(); // 回调函数,当动画执行完后才执行 13 // } 14 // &&是短路运算符,存在callback时才会继续执行callback() 15 callback && callback(); 16 } 17 obj.style.left = obj.offsetLeft + step + 'px'; 18 }, 15) 19 }
具体实现代码如下:
HTML代码:
1 <div class="con"> 2 <i class="icon iconfont iconarrow_left arrow-l"></i> 3 <i class="icon iconfont iconarrow_right arrow-r"></i> 4 <ul> 5 <li> 6 <a href="javascript:;"><img src="images/img1.jpg" alt=""></a> 7 </li> 8 <li> 9 <a href="javascript:;"><img src="images/img2.jpg" alt=""></a> 10 </li> 11 <li> 12 <a href="javascript:;"><img src="images/img3.jpg" alt=""></a> 13 </li> 14 <li> 15 <a href="javascript:;"><img src="images/img4.jpg" alt=""></a> 16 </li> 17 <li> 18 <a href="javascript:;"><img src="images/img5.jpg" alt=""></a> 19 </li> 20 </ul> 21 <ol> 22 </ol> 23 </div>
ps: 我左右侧小箭头是使用的Iconfont图标(iconarrow_left,iconarrow_right),要引入进去
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_oljcm07nn2.css">
CSS代码:
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 ul,li,ol,a { 7 list-style: none; 8 text-decoration: none; 9 } 10 .con { 11 width: 533px; 12 height: 300px; 13 margin: 100px auto; 14 position: relative; 15 background-color: #f0f0f0; 16 overflow: hidden; 17 } 18 .arrow-l,.arrow-r{ 19 display: none; 20 width: 20px; 21 height: 40px; 22 line-height: 40px; 23 text-align: center; 24 color: #eee; 25 position: absolute; 26 top: 45%; 27 background-color: rgba(0, 0, 0, 0.2); 28 z-index: 2; 29 cursor: pointer; 30 } 31 .arrow-l { 32 left: 0; 33 } 34 .arrow-r{ 35 right: 0; 36 } 37 ul { 38 position: absolute; 39 width: 600%; 40 } 41 ul li { 42 float: left; 43 } 44 ul li img { 45 width: 533px; 46 height: 300px; 47 } 48 ol { 49 position: absolute; 50 left: 50%; 51 bottom: 8px; 52 -webkit-transform: translateX(-50%); 53 transform: translateX(-50%); 54 } 55 ol li { 56 float: left; 57 width: 6px; 58 height: 6px; 59 margin: 0 2px; 60 border-radius: 50%; 61 border: 2px solid rgba(255, 255, 255, 0.5); 62 cursor: pointer; 63 } 64 .current { 65 background-color: #ffe; 66 } 67 </style>
详细JavaScript代码(index.js)
1 window.addEventListener('load', function() { // 等页面加载完毕 2 // 获取需要用到的的元素 3 var arrow_l = document.querySelector('.arrow-l'); 4 var arrow_r = document.querySelector('.arrow-r'); 5 var con = document.querySelector('.con'); 6 var conWidth = con.offsetWidth; 7 // 鼠标经过箭头显示,鼠标离开箭头隐藏 8 con.addEventListener('mouseenter', function() { 9 arrow_l.style.display = 'block'; // 将左右箭头的display设为block 10 arrow_r.style.display = 'block'; 11 // 鼠标经过停止定时器 12 clearInterval(timer); 13 timer = null; // 释放定时器变量 14 }); 15 con.addEventListener('mouseleave', function() { 16 arrow_l.style.display = 'none'; // 将左右箭头display设为none 17 arrow_r.style.display = 'none'; 18 // 鼠标离开再重新开启定时器 19 timer = setInterval(function() { 20 // 手动调用点击事件 21 arrow_r.click(); // 自动轮播 22 }, 2000); 23 }); 24 25 var ul = con.querySelector('ul'); 26 var ol = con.querySelector('ol'); 27 // 动态添加底部小圆圈 28 for(var i = 0; i < ul.children.length; i++) { 29 var li = document.createElement('li'); 30 // 通过添加自定义属性来记录小圆圈索引号 31 li.setAttribute('index', i); 32 ol.appendChild(li); 33 // 生成小圆圈的同时就可以给它绑定单击事件 34 li.addEventListener('click', function() { 35 // 排他思想 干掉所有人,留下我自己 36 for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圆圈改为未选中状态 37 ol.children[i].className = ''; 38 } 39 // 再把当前小圆圈改为选中状态 40 this.className = 'current'; 41 var index = this.getAttribute('index'); // 获取当前小圆圈的索引 42 // 将index值赋值给num以及circle,将小圆圈的点击事件和左右箭头点击事件同步 43 num = index; 44 circle = index; 45 animate(ul, - index * conWidth); 46 }) 47 } 48 // 让第一个小圆圈底色为白色(选中状态) 49 ol.children[0].className = 'current'; 50 // 克隆第一张图片 51 var first = ul.children[0].cloneNode(true); // true 深拷贝 52 ul.appendChild(first); // 拷贝第一张图片添加到ul最后 53 54 var num = 0; // 用来存储点击后图片序号 55 var circle = 0; // 用来存储点击后小圆圈序号 56 var flag = true; // flag 节流阀 防止用户点击过快 图片播放太快 57 // 右侧箭头点击播放 58 arrow_r.addEventListener('click', function() { 59 if(flag) { 60 // 点击后先关闭节流阀 61 flag = false; 62 // 如果播放到了最后一张,就把left直接值设为0从头播放,同时还原num 63 if(num == ul.children.length - 1) { 64 ul.style.left = 0; 65 num = 0; 66 } 67 num++; 68 animate(ul, - num * conWidth, function() { 69 // 回调函数 动画执行完后开启节流阀 70 flag = true; 71 }); 72 // 小圆圈和箭头一起变化 73 circle++; 74 /* if(circle == ol.children.length) { 75 circle = 0; 76 } */ 77 // 可以用三元运算符判断小圆圈是否到了最后一个,如果是最后一个就还原circle 78 circle == ol.children.length ? circle = 0 : circle; 79 circleChange(); // 使当前小圆圈为选中状态 80 } 81 }) 82 83 // 左侧箭头点击播放 84 arrow_l.addEventListener('click', function() { 85 if(flag) { 86 // 关闭节流阀 87 flag = false; 88 // 如果播放到了第一张,就把left值设为最后一张的值 89 if(num == 0) { 90 num = ul.children.length - 1; 91 ul.style.left = - num * conWidth + 'px'; 92 } 93 num--; 94 animate(ul, - num * conWidth, function() { 95 flag = true; 96 }); 97 // 小圆圈和箭头一起变化 98 circle--; 99 // circle < 0 时说明是第一张图片,将小圆圈改为第四个(索引为3) 100 if(circle < 0) { 101 circle = ol.children.length - 1; 102 } 103 circleChange(); 104 } 105 }) 106 // 小圆圈的选中状态(相同代码可以封装为一个函数,使代码更简洁) 107 function circleChange() { 108 // 排他思想 109 for(var i = 0; i < ol.children.length; i++) { 110 ol.children[i].className = ''; 111 } 112 ol.children[circle].className = 'current'; 113 } 114 // 自动播放轮播图,相当于隔一段时间调用一次右侧箭头点击事件 115 var timer = setInterval(function() { 116 // 手动调用点击事件 117 arrow_r.click(); 118 }, 2000); 119 })
具体代码点击 https://github.com/sunyan1998/Some-demos (觉得不错右上角顺手点个☆star哦~感谢O(∩_∩)O~)
里面有很多CSS3/JS/jQuery小例子哦,包括各种轮播图、电梯导航、封装的动画函数、todolist、登录模态框(可拖动)、购物车、点击换肤、密码显示隐藏、各种布局(bootstrap-flex-rem)等等......