在上篇文章中，使用改变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";
}
