在上篇文章中，使用改變left的值實現輪播效果，在PC端上因為要兼容舊版瀏覽器，所以都采用這種做法。但是在移動端上會使瀏覽器造成極大的性能開銷，在一些老機型中會出現明顯的卡頓，用戶體驗不好，所以在這篇文章中將使用translate實現輪播。translate樣式的變化會造成重繪，但是并不會進行CSS樣式的重新計算和布局，其性能要明顯優于left。
在整體結構不變的前提下，只是更改了其JS文件就能實現相關效果，為了能夠更好的更改和讀取其translateX的值，所以寫了一個相關的函數。
// 只傳入兩個實參則為獲取，傳入三個實參為設置參數值，當然為了簡單點，所以只加入了translateX這一單一屬性，用戶可以自行對該函數進行改造，
//可以適當的加入translateY,scaleX,scaleY等值。
function cssTransform(ele,attr,val){
if(!ele.transform){
ele.transform = {};
};
//當傳入值時對屬性進行設置。
if(arguments.length>2){
ele.transform[attr] = val;
var sval = "";
for(var s in ele.transform){
if(s == "translateX"){
sval += s + "("+ele.transform[s] +"px)";
}
ele.style.WebkitTransform = ele.style.transform = sval;
}
}else{
val = ele.transform[attr];
if(typeof val=="undefined"){
if(attr=="translateX"){
val = 0;
}
};
console.log(val);
return val;
}
}
在代碼中，有幾個重要的點，掌握其原理之后，移動端輪播就基本可以了。
1.在頁面剛加載時，設置盒子的translateX為0，并取消定時器。
2.當手指按下的時候，取消其transition，判斷當前屬于第幾張圖片，當為第零張圖片的時候，將盒子迅速拉至復制出來的圖片的第一張，當圖片在最后一張的時候，將盒子迅速拉至未復制的圖片的最后一張。
3.當手指滑屏時，改變其box的tranflateX.
4.當手指抬起時，得到處于第幾張照片，然后將其滑入，并開啟定時器。
var wrap = document.querySelector(".wrap");
var box = document.querySelector(".box");
box.innerHTML+=box.innerHTML;
var aLi = document.querySelectorAll(".box li");
var aNav = document.querySelectorAll("nav span");
var aHeight = aLi[0].offsetHeight;
var aWidth = wrap.offsetWidth;
wrap.style.height = aHeight + 'px';
box.style.width = aLi.length * 100 + "%";
for(var i=0;i<aLi.length;i++){
aLi[i].style.width = 1/aLi.length * 100 + "%";
}
var startPoint = 0;
var startEle = 0;
var now = 0;
var timer = 0;
cssTransform(box,"translateX",0);
auto();
wrap.addEventListener("touchstart",function(e){
clearInterval(timer);
box.style.transition = "none";
var moveX = cssTransform(box,"translateX");
now = Math.round(-moveX/aWidth);
if(now==0){
now = aNav.length;
}else if(now==aLi.length-1){
now = aNav.length-1;
}
cssTransform(box,"translateX",-now*aWidth);
startPoint = e.changedTouches[0].pageX;
startEle = cssTransform(box,"translateX");
});
wrap.addEventListener("touchmove",function(e){
var endPoint = e.changedTouches[0].pageX;
var disX = endPoint - startPoint;
cssTransform(box,"translateX",disX+startEle);
});
wrap.addEventListener("touchend",function(e){
var moveX = cssTransform(box,"translateX");
now = Math.round(-moveX/aWidth);
tab();auto();
});
function auto(){
clearInterval(timer);
timer = setInterval(function(){
if(now == aLi.length-1){
now = aNav.length - 1;
}
box.style.transition = "none";
cssTransform(box,"translateX",-now*aWidth);
setTimeout(function(){
now++;
tab();
},30);
},2000);
};
function tab(){
box.style.transition = ".5s";
cssTransform(box,"translateX",-now*aWidth);
for(var i=0;i<aNav.length;i++){
aNav[i].className = "";
};
aNav[now%aNav.length].className = "active";
}
