模拟淘宝轮播图

功能

自动轮播，鼠标进入轮播区后变为手动控制；鼠标进入轮播区出现左右移控制箭头；图片由左右移箭头控制切换，并且底部轮播圆圈相应变化；无缝轮播；底部轮播圆圈数量自适应图片数量；点击圆圈切换图片；节流阀控制图片切换不会过快

效果

（bug，这里为什么符合大小要求的图片和gif都没法传，嘤）

模拟前端轮播图案例制作效果

备注

1、本案例完整资源参见：前端轮播图案例（含详细注释） 2、可以通过控制台观察索引变化 3、没有做无缝轮播，日后有空再完善 （更新在最后啦，左右侧箭头的无缝轮播。加上了节流阀。） 4、左右移箭头本来当做背景图，但我background-image设置失效，目前没发现是什么问题，所以用了插入图片 （纠正：好吧，我傻了，设置背景图片没有问题，我把属性名写成了background-image，所以说我属性值无效。。。） background: rgba(0, 0, 0, .5) url(img/arrow-prev.png) no-repeat 8px 4px;

代码

1、html页面框架 lunbo.html

<div class="lunbo"> <!-- 滚动区域 --> <ul class="gundong"> <li> <a href="#"><img src="upload/focus.jpg" alt=""></a> </li> <li> <a href="#"> <img src="upload/focus1.jpg" alt=""></a> </li> <li> <a href="#"> <img src="upload/focus2.jpg" alt=""></a> </li> <li> <a href="#"> <img src="upload/focus3.jpg" alt=""></a> </li> </ul> <!-- 左右移控制区域 --> <span class="spanleft" style="display: none;"> <img src="img/arrow-prev.png" alt=""> </span> <span class="spanright" style="display: none;"> <img src="img/arrow-next.png" alt=""> </span> <!-- 底下圆点区域 --> <ul class="bottom"> </ul> </div>

2、左右移动画效果封装 move.js

//封装动画函数 //到达目标位置之后变色----回调函数callback function Move(object, maxdis, callback) { // console.log(callback); clearInterval(object.timer); object.timer = setInterval(function() { // 步长出现小数，导致不能到达目标位置.正向向大取整；反向向小取整 var step = (maxdis - object.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); object.style.left = object.offsetLeft + step + "px"; if (object.offsetLeft == maxdis) { clearInterval(object.timer); // 判断条件 if (callback) { callback(); } } }, 15); }

3、主要功能实现片段 lunbo.js

// 图片索引 var index = 0; // 每次移动的单位宽度（图片宽度） var imgwidth = lunbo.offsetWidth; console.log(imgwidth); // 后面用于判断正向运动还是反向运动 var flag = true; // 让底部小圆圈的个数跟着图片数量来 // 图片数量 var imgnum = imglis.length; // 创建子元素 for (var i = 0; i < imgnum; i++) { var point = document.createElement("li"); point.setAttribute("index", i); bottom.appendChild(point); } // 获取新增li元素，给第一个li加上样式 var points = bottom.children; points[0].className = "current"; // 底部圆点变色的函数（作为Move的回调函数） function changePointColor(index) { for (var i = 0; i < points.length; i++) { points[i].className = ""; } points[index].className = "current"; } // 1、自动轮播 var timer = setInterval(function() { // 和点击左右箭头一样的效果：手动调用点击事件 // right.click(); // 正反向交替滚动：判断正向还是反向移动 if (index == imgnum - 1) { flag = false; } else if (index == 0) { flag = true; } if (flag) { index++; } else { index--; } Move(gundong, -imgwidth * index, changePointColor(index)); console.log("鼠标进入前：" + index); }, 2000); // 2、鼠标进入轮播区才出现左右移元素 gundong.parentNode.addEventListener("mouseenter", function() { left.style.display = "block"; right.style.display = "block"; // 鼠标进入，停止自动轮播 clearInterval(timer); }); gundong.parentNode.addEventListener("mouseleave", function() { clearInterval(timer); left.style.display = "none"; right.style.display = "none"; // 鼠标离开，自动每隔2s轮播 timer = setInterval(function() { if (index == imgnum - 1) { flag = false; } else if (index == 0) { flag = true; } if (flag) { index++; } else { index--; } Move(gundong, -imgwidth * index, changePointColor(index)); console.log("进入又离开后：" + index); }, 2000); }); // 3、图片根据左右移动作运动，圆点同步变色 right.addEventListener("click", function() { // 右边到头index == imgnum - 1 if (index != imgnum - 1) { index++; Move(gundong, -imgwidth * index, function() { for (var i = 0; i < points.length; i++) { points[i].className = ""; } points[index].className = "current"; }); } }); left.addEventListener("click", function() { // 左边到头index == 0 if (index != 0) { index--; Move(gundong, -imgwidth * index, changePointColor(index)); } }); // 4、点击圆点切换图片 for (var i = 0; i < points.length; i++) { points[i].addEventListener("click", function() { // 点击圆点具有随机性，所以用自定义属性获取圆圈索引号 var getIndex = this.getAttribute("index"); // 修改图片索引号 index = getIndex; console.log("点击圆点后：" + index); for (var j = 0; j < points.length; j++) { points[j].className = ""; } this.className = "current"; Move(gundong, -imgwidth * index); }) }

4、无缝轮播+节流阀补充（覆盖上面代码的第三点） lunbo.js

// 3、图片根据左右移动作运动，圆点同步变色 // 无缝轮播：把第一张图片克隆到最后面，继续点击向右箭头直接设置left=0硬切，再滚到第二张 var clonefirst = imglis[0].cloneNode(true); gundong.appendChild(clonefirst); // 防止因为连续点击图片运动速度过快：使用节流阀 var funcflag = true; // 节流阀函数封装 // function toDo(funcflag) { // funcflag = true; // } right.addEventListener("click", function() { if (funcflag) { funcflag = false; // 右边到头index == imgnum - 1 if (index == gundong.children.length - 1) { index = 0; gundong.style.left = 0; } index++; if (index == gundong.children.length - 1) { changePointColor(0); } else { changePointColor(index); } Move(gundong, -imgwidth * index, function() { funcflag = true; }); console.log(funcflag); } }); // 继续点击向左箭头直接设置left到最后一张，再滚到倒数第二张 left.addEventListener("click", function() { if (funcflag) { funcflag = false; if (index == 0) { index = gundong.children.length - 1; gundong.style.left = -imgwidth * index + "px"; } index--; Move(gundong, -imgwidth * index, function() { funcflag = true; }); if (index == gundong.children.length - 1) { changePointColor(0) } else { changePointColor(index); } } });