1：HTML樣式

*{

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;}

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);

}

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

ulNode.innerHTML+='

';

}

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

if(i==0){

pointsWrap.innerHTML+='';

}else{

pointsWrap.innerHTML+='';

}

}

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[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)

總結

以上是生活随笔為你收集整理的移动端实现文字轮播_移动端轮播图实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。