1. 程式人生 > >移動端輪播圖實現

移動端輪播圖實現

1:HTML樣式
<!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.onload=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>

 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)

  

;(用來對transform屬性的操作
;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)