原生js实现无缝轮播

2019-04-15 15:42发布

站内文章 / PIC单片机
12724 0 1224
原生js实现无缝轮播 　　因为要做到无缝，所以就要把第一张图片和最后一张连接起来，在此处采用js克隆了第一张图片的节点，添加到最后，显示图片序号的小圆按钮也是使用js动态添加的。
  1. html部分  
  2. 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; }  
  3. 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(); } // 改变按钮颜 {MOD} 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; //否则查找其父节点 } }  

热门文章