原生js实现无缝轮播
因为要做到无缝，所以就要把第一张图片和最后一张连接起来，在此处采用js克隆了第一张图片的节点，添加到最后，显示图片序号的小圆按钮也是使用js动态添加的。
- html部分
???<div class="banner" id="banner"> ???????<ul class="pic" id="pic"> ???????????<li><a href="javascript:void(0)"><img src="images/1.jpg"></a></li> ???????????<li><a href="javascript:void(0)"><img src="images/2.png"></a></li> ???????????<li><a href="javascript:void(0)"><img src="images/3.png"></a></li> ???????????<li><a href="javascript:void(0)"><img src="images/4.png"></a></li> ???????????<li><a href="javascript:void(0)"><img src="images/5.jpg"></a></li> ???????????<li><a href="javascript:void(0)"><img src="images/6.png"></a></li> ???????????<li><a href="javascript:void(0)"><img src="images/7.png"></a></li> ???????</ul> ???????<ul class="dot" id="dot"></ul> ???????<button class="left" id="leftBtn"><</button> ???????<button class="right" id="rightBtn">></button> ???</div>
- css部分
??????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????.banner { ???????????width: 1000px; ???????????height: 600px; ???????????margin: 0 auto; ???????????position: relative; ???????????overflow: hidden; ???????} ???????ul, li { ???????????list-style: none; ???????} ???????.pic { ???????????height: 600px; ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????} ???????.pic li { ???????????float: left; ???????} ???????.pic li img { ???????????width: 1000px; ???????????height: 600px; ???????} ???????.dot { ???????????width: 100%; ???????????text-align: center; ???????????font-size: 0; ???????????position: absolute; ???????????bottom: 40px; ???????????left: 0; ???????} ???????.dot li { ???????????display: inline-block; ???????????width: 10px; ???????????height: 10px; ???????????border-radius: 50%; ???????????background-color: #fff; ???????????margin: 0 5px; ???????????cursor: pointer; ???????} ???????.banner button { ???????????width: 30px; ???????????height: 50px; ???????????background-color: rgba(0, 0, 0, .5); ???????????border: 0 none; ???????????color: #fff; ???????????opacity: .5; ???????????position: absolute; ???????????top: 45%; ???????????cursor: pointer; ???????????font-size: 24px; ???????} ???????.left { ???????????left: 0; ???????} ???????.right { ???????????right: 0; ???????} - js部分
js中有封装的一些方法，包括查看对象属性的兼容写法，动画函数（该方法实现了height,width,left,top,opacity等属性的动画效果），和通过事件冒泡找寻节点的函数；???????var leftBtn = document.getElementById("leftBtn"); ???????var rightBtn = document.getElementById("rightBtn"); ???????var banner = document.getElementById("banner"); ???????var pic = document.getElementById("pic"); ???????var dot = document.getElementById("dot"); ???????for (var i = 0; i < pic.children.length; i++) { ???????????var node = document.createElement("LI"); ???????????node.index = i; ???????????dot.appendChild(node); ???????} ???????var copy = pic.children[0].cloneNode(true); ???????pic.appendChild(copy); ???????var width = parseInt(getStyle(pic.children[0], "width")); ???????var len = pic.children.length; ???????pic.style.width = width * len + "px"; ???????var index = 0; ???????var t; ???????function move() { ???????????if(index == len) { ???????????????pic.style.left = 0; ???????????????index = 1; ???????????} ???????????if (index == -1) { ???????????????pic.style.left = -(len - 1) * width + "px"; ???????????????index = len - 2; ???????????} ???????????left = -width * index; ???????????changeDots(index); ???????????animate(pic, {left, left}, function() { ???????????????t = setTimeout(function () { ???????????????????index++; ???????????????????if (index == len) { ???????????????????????pic.style.left = 0; ???????????????????????index = 1; ???????????????????} ???????????????????move(); ???????????????}, 2000); ???????????}); ???????} ???????move(); ???????// 为按钮添加点击事件 ???????dot.onclick = function(e) { ???????????e = e || window.event; ???????????var target = e.target || e.srcElement; ???????????target = getTarget(target, "tagName", "LI", this); ???????????if (target) { ???????????????clearTimeout(t); ???????????????index = target.index; ???????????????changeDots(index); ???????????????move(); ???????????} ???????} ???????// 左右按钮 ???????leftBtn.onclick = function() { ???????????clearTimeout(t); ???????????index--; ???????????move(); ???????} ???????rightBtn.onclick = function() { ???????????clearTimeout(t); ???????????index++; ???????????move(); ???????} ???????// 改变按钮颜色 ???????function changeDots(index) { ???????????if (index < 0) { ???????????????index = len; ???????????} ???????????if (index == len - 1) { ???????????????index = 0; ???????????} ???????????for (var i = 0; i < len - 1; i++) { ???????????????dot.children[i].style.backgroundColor = "#fff"; ???????????} ???????????dot.children[index].style.backgroundColor = "red"; ???????} ???????/** ????????* 查看ele对象的type属性 ????????* @param {元素对象} ele ?????????* @param {属性} type ?????????*/ ???????function getStyle(ele, type) { ???????????if (ele.currentStyle) { ???????????????return ele.currentStyle[type]; ???????????} else { ???????????????return getComputedStyle(ele, null)[type]; ???????????} ???????} ???????/** ????????* 动画效果 ????????* @param {元素对象} el ?????????* @param {结束条件} endObj ?????????* @param {回调函数} cb ?????????* @param {时间} time ?????????*/ ???????function animate(el, endObj, cb, time) { ???????????time = time || 200; ???????????var startObj = {}; ???????????var _startObj = {}; ???????????var speedObj = {}; ???????????for (var i in endObj) { ???????????????startObj[i] = parseInt(getStyle(el, i)); ???????????????_startObj[i] = startObj[i]; ???????????????speedObj[i] = 16.7 * (endObj[i] - startObj[i]) / time; ???????????} ???????????var flag = false; ???????????clearInterval(el.t); ???????????el.t = setInterval(function() { ???????????????for (var j in endObj) { ???????????????????startObj[j] += speedObj[j]; ???????????????????if (_startObj[j] < endObj[j] ? startObj[j] >= endObj[j] : startObj[j] <= endObj[j]) { ???????????????????????startObj[j] = endObj[j]; ???????????????????????clearInterval(el.t); ???????????????????????flag = true; ???????????????????} ???????????????????if (j == "opacity") { ???????????????????????el.style[j] = startObj[j]; ???????????????????} else { ???????????????????????el.style[j] = startObj[j] + "px"; ???????????????????} ???????????????} ???????????????if (flag && cb) { ???????????????????cb(); ???????????????} ???????????}, 16.7); ???????} ???????/** ????????* 找到attr属性为value的节点 ????????* @param {目标对象，鼠标点击对象} target ?????????* @param {属性名} attr ?????????* @param {属性值} value ?????????* @param {结束条件} end ?????????*/ ???????function getTarget(target, attr, value, end) { ???????????while (target != end) { //如果鼠标点击的是end，则直接结束 ???????????????if (target[attr] == value) { //如果点击的对象的attr属性值为value，则返回该对象 ???????????????????return target; ???????????????} ???????????????target = target.parentNode; //否则查找其父节点 ???????????} ???????}
原生js实现无缝轮播
原文地址：https://www.cnblogs.com/Yancyzheng/p/10050514.html