<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}#wrap{height: 100%;overflow: hidden;}.carousel-wrap{position: relative;}.carousel-wrap > .list{list-style: none;overflow: hidden;position: absolute;}.carousel-wrap > .list > li{float: left;}.carousel-wrap > .list > li > a,.carousel-wrap > .list > li > a >img{display: block;}.carousel-wrap > .list > li > a >img{width: 100%;}.carousel-wrap > .points-wrap{position: absolute;bottom: 0;width: 100%;text-align: center;z-index: 1;}.carousel-wrap > .points-wrap > span{display: inline-block;width: 10px;height: 10px;border-radius: 50%;background: green;margin-left:5px;}.carousel-wrap > .points-wrap > span.active{background: deeppink;}</style></head><body><div id="wrap"><div class="carousel-wrap" needAuto ><div class="points-wrap"></div></div></div></body><script src="js/damu.js"></script><script type="text/javascript">window.οnlοad=function(){document.addEventListener("touchstart",function(ev){ev=ev||event;ev.preventDefault();});var arr=["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"]damu.carousel(arr);}</script></html>1：HTML样式
2：组件
;(function(w){w.damu = {};w.damu.css=function (node,type,val){if(typeof node ==="object" && typeof node["transform"] ==="undefined" ){node["transform"]={};}if(arguments.length>=3){//设置var text ="";node["transform"][type] = val;for( item in node["transform"]){if(node["transform"].hasOwnProperty(item)){switch (item){case "translateX":case "translateY":text += item+"("+node["transform"][item]+"px)";break;case "scale":text += item+"("+node["transform"][item]+")";break;case "rotate":text += item+"("+node["transform"][item]+"deg)";break;}}}node.style.transform = node.style.webkitTransform = text;}else if(arguments.length==2){//读取val =node["transform"][type];if(typeof val === "undefined"){switch (type){case "translateX":case "translateY":case "rotate":val =0;break;case "scale":val =1;break;}}return val;}}w.damu.carousel=function (arr){//布局var carouselWrap = document.querySelector(".carousel-wrap");if(carouselWrap){var pointslength = arr.length;//无缝var needCarousel = carouselWrap.getAttribute("needCarousel");needCarousel = needCarousel == null?false:true;if(needCarousel){arr=arr.concat(arr);}var ulNode = document.createElement("ul");var styleNode = document.createElement("style");ulNode.classList.add("list");for(var i=0;i<arr.length;i++){ulNode.innerHTML+='<li><a href="javascript:;"><img src="'+arr[i]+'"/></a></li>';}styleNode.innerHTML=".carousel-wrap > .list > li{width: "+(1/arr.length*100)+"%;}.carousel-wrap > .list{width: "+arr.length+"00%}";carouselWrap.appendChild(ulNode);document.head.appendChild(styleNode);var imgNodes = document.querySelector(".carousel-wrap > .list > li > a >img");setTimeout(function(){carouselWrap.style.height=imgNodes.offsetHeight+"px";},100)var pointsWrap = document.querySelector(".carousel-wrap > .points-wrap");if(pointsWrap){for(var i=0;i<pointslength;i++){if(i==0){pointsWrap.innerHTML+='<span class="active"></span>';}else{pointsWrap.innerHTML+='<span></span>';}}var pointsSpan = document.querySelectorAll(".carousel-wrap > .points-wrap > span");}/*滑屏* 1.拿到元素一开始的位置* 2.拿到手指一开始点击的位置* 3.拿到手指move的实时距离* 4.将手指移动的距离加给元素* */var index =0;//手指一开始的位置var startX = 0;//元素一开始的位置var elementX = 0;//var translateX =0;carouselWrap.addEventListener("touchstart",function(ev){ev=ev||event;var TouchC = ev.changedTouches[0];ulNode.style.transition="none";//无缝/*点击第一组的第一张时 瞬间跳到第二组的第一张点击第二组的最后一张时 瞬间跳到第一组的最后一张*///index代表ul的位置if(needCarousel){var index = damu.css(ulNode,"translateX")/document.documentElement.clientWidth;if(-index === 0){index = -pointslength;}else if(-index ==(arr.length-1)){index = -(pointslength-1)}damu.css(ulNode,"translateX",index*document.documentElement.clientWidth)}startX=TouchC.clientX;//elementX=ulNode.offsetLeft;//elementX=translateX;elementX=damu.css(ulNode,"translateX");//清楚定时器clearInterval(timer);})carouselWrap.addEventListener("touchmove",function(ev){ev=ev||event;var TouchC = ev.changedTouches[0];var nowX = TouchC.clientX;var disX = nowX - startX;//ulNode.style.left = elementX+disX+"px";/*translateX = elementX+disX;ulNode.style.transform = 'translateX('+translateX+'px)';*/damu.css(ulNode,"translateX",elementX+disX);})carouselWrap.addEventListener("touchend",function(ev){ev=ev||event;//index抽象了ul的实时位置//var index = ulNode.offsetLeft/document.documentElement.clientWidth;//var index = translateX/document.documentElement.clientWidth;index = damu.css(ulNode,"translateX")/document.documentElement.clientWidth;index = Math.round(index);//超出控制if(index>0){index=0;}else if(index<1-arr.length){index=1-arr.length;}xiaoyuandian(index);ulNode.style.transition=".5s transform";//ulNode.style.left = index*(document.documentElement.clientWidth)+"px";/*translateX=index*(document.documentElement.clientWidth);ulNode.style.transform ='translateX('+translateX+'px)';*/damu.css(ulNode,"translateX",index*(document.documentElement.clientWidth));//开启自动轮播if(needAuto){auto();}})//自动轮播var timer =0;var needAuto = carouselWrap.getAttribute("needAuto");needAuto = needAuto == null?false:true;if(needAuto){auto();}function auto(){clearInterval(timer);timer=setInterval(function(){if(index == 1-arr.length){ulNode.style.transition="none";index = 1-arr.length/2;damu.css(ulNode,"translateX",index*document.documentElement.clientWidth);}setTimeout(function(){index--;ulNode.style.transition="1s transform";xiaoyuandian(index);damu.css(ulNode,"translateX",index*document.documentElement.clientWidth);},50)},2000)}function xiaoyuandian(index){if(!pointsWrap){return;}for(var i=0;i<pointsSpan.length;i++){pointsSpan[i].classList.remove("active");}pointsSpan[-index%pointslength].classList.add("active");}}}})(window)
;function(w){w.damu = {};w.damu.css=function (node,type,val){if(typeof node ==="object" && typeof node["transform"] ==="undefined" ){node["transform"]={};}if(arguments.length>=3){//设置var text ="";node["transform"][type] = val;for( item in node["transform"]){if(node["transform"].hasOwnProperty(item)){switch (item){case "translateX":case "translateY":text += item+"("+node["transform"][item]+"px)";break;case "scale":text += item+"("+node["transform"][item]+")";break;case "rotate":text += item+"("+node["transform"][item]+"deg)";break;}}}node.style.transform = node.style.webkitTransform = text;}else if(arguments.length==2){//读取val =node["transform"][type];if(typeof val === "undefined"){switch (type){case "translateX":case "translateY":case "rotate":val =0;break;case "scale":val =1;break;}}return val;}}})(window);(用来对transform属性的操作
