使用原生JS实现移动端图片轮播效果(二)

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

以上代码都放在：https://github.com/waterwong/swiper