多图展示-轮播图效果_老神仙6

网络 02-07 1768

功能需求：鼠标经过轮播图模块，左右按钮显示，离开则隐藏；点击右侧按钮一次，图片往左移动播放一张，以此类推，左侧按钮同理；图下方的小圆点模块跟随图片播放一起改变；点击小圆点也可以播放相对应的图片；轮播图有自动播放效果，当鼠标经过时停止，离开后继续。

具体效果如图：

具体代码 HTML <div class="focus">  <button class="arrow_l" style="display: none;"><i>?</i></button> <button class="arrow_r" style="display: none;"><i>?</i></button>  <ul> <li> <a href="#"><img src="upload/focus.png"></a> </li> <li> <a href="#"><img src="upload/focus1.jpg"></a> </li> <li> <a href="#"><img src="upload/focus2.jpg"></a> </li> <li> <a href="#"><img src="upload/focus3.jpg"></a> </li> </ul>  <ol class="circle"> </ol> </div> CSS .focus { position: relative; width: 721px; height: 455px; margin: 0 auto; overflow: hidden; } .arrow_l, .arrow_r { position: absolute; top: 50%; height: 35px; background: rgba(0, 0, 0, .15); border: 0; font-family: "icomoon"; font-size: 20px; color: rgba(255, 255, 255, .8); line-height: 35px; z-index: 2; } .arrow_l { margin-top: -20px; width: 25px; border-radius: 0 18px 18px 0; } .arrow_r { right: 0; margin-top: -20px; width: 22px; border-radius: 18px 0 0 18px; } .arrow_r i { position: relative; right: -3px; } .focus ul { position: absolute; /* ul要用到animate动画函数，需要加定位 */ top: 0; left: 0; width: 501%; } .focus li { float: left; } .focus ol { position: absolute; bottom: 10px; left: 50px; } .focus ol li { float: left; width: 8px; height: 8px; margin: 0 3px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; cursor: pointer; } .current { background-color: #fff; } JS window.addEventListener('load', function () { var focus = document.querySelector('.focus'); var arrow_l = document.querySelector('.arrow_l'); var arrow_r = document.querySelector('.arrow_r'); var ul = focus.querySelector('ul'); var ol = focus.querySelector('ol'); var focusWidth = focus.offsetWidth; // 动画函数，obj执行动画的对象，target要移动的目标距离，callback回调函数 function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); callback && callback(); // 利用短路运算 } else { obj.style.left = obj.offsetLeft + step + 'px'; } }, 30) } // 鼠标经过轮播图模块，左右按钮显示，离开则隐藏;另外，停止自动播放，离开则继续开启定时器 focus.addEventListener('mouseenter', function () { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null; // 清除变量 }) focus.addEventListener('mouseleave', function () { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function () { arrow_r.click(); }, 3000) }) // 根据图片张数动态生成小圆点 for (var i = 0; i < ul.children.length; i++) { var li = document.createElement('li'); // 给li设置index属性值 li.setAttribute('index', i); ol.appendChild(li); // 生成圆点的同时绑定点击排他事件 li.addEventListener('click', function () { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'current'; // 点击小圆点移动图片 var index = this.getAttribute('index'); animate(ul, -index * focusWidth); // 注意要加负号 num = index; // 点击某个小圆点，就把它的index传给num，以实现圆点和箭头多线程工作 }) } // ol里的第一个li设置current类 ol.children[0].className = 'current'; // 克隆第一张图片 var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 右侧按钮无缝滚动 var num = 0; var flag = true; // 节流阀的开关，用来防止连续点击按钮造成的播放过快。即当animate动画播完才可继续点击生成动画 arrow_r.addEventListener('click', function () { if (flag) { flag = false; if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function () { flag = true; }); circleChange(); } }) // 左侧按钮无缝滚动 arrow_l.addEventListener('click', function () { if (flag) { if (num == 0) { flag = false; num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth, function () { flag = true; }); circleChange(); } }) // 改变当前小圆点的样式函数 function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } if (num == ul.children.length - 1) { ol.children[0].className = 'current'; // 当图片是克隆图时，小圆点的当前效果显示在第一个 } else { ol.children[num].className = 'current'; } } // 自动播放 var timer = setInterval(function () { arrow_r.click(); // 手动调用点击事件 }, 3000) }) 重点解析根据图片张数自动生成小圆点

ul.children.length可得到图片张数；创建节点createElement(‘li’)、增加节点appendChild(li)；用循环即可生成相应数量的小圆点。

节流阀

用来防止连续点击轮播图造成的播放速度过快；设置节流阀开关flag，一开始为true，点击后为false；使用animate的回调函数设置flag为true，即当动画执行完了才变回true。

遇到最后一张图时，重新开始轮播

利用克隆cloneNode生成与第一张图一模一样的图放在最后；判断当num==最后一张图时，让left=0，再继续轮播。

自动轮播

自动轮播功能其实与右键按钮功能相同；因此可以设置定时器，调用点击事件来实现arrow_r.click()。