移动端轮播图实现
Posted love-life-insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端轮播图实现相关的知识，希望对你有一定的参考价值。
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)
以上是关于移动端轮播图实现的主要内容，如果未能解决你的问题，请参考以下文章