移动端轮播效果

一、涉及知识点

1.touchstart、touchmove、touchend

2.触摸参数，事件e

e.touches：屏幕中所有手势列表；

e.touches[0]：获取第一个手势,是一个json对象（属性有pageX,pageY...），用于touchstart，touchmove事件中；

e.changedTouches:获取发生该事件的手势列表；

e.changedTouches[0]:用于touchend；

3.移动端网速慢，轮播图片加载，做了一些技巧性处理：

html结构中，第一张图的src属性填写轮播图，其他图片用站位图片代替；

在js首次加载中，克隆第一张图（fc）和最后一张图片(lc),将fc追加到图片列表之后，将lc添加到图片列表之前，加载出包含原第一图片，共三张图片；

 ~~作为一个web初级程序员,多写拆轮子，多写轮子才是王道，多总结~~

4.判断当前图片是否加载完，直接上代码了：

function loadImag($img,callback){
　　if(!($img&&$img.length)) return;
　　$img.attr("src",$img.attr("data-src"));
　　callback&&($img[0].onload=function(){
　　callback();
　　$img[0].onload=null;
　　})
}

5.transition、transform、translate3d，老是弄混这三个属性，这里理解一下

transtion:all 0.4s ease;过渡，效果

transform:空间上的效果

transform:translate3d(x,y,z);

6.设置浏览器兼容。直接抄袭别人代码，心里有愧，不好意思拿到这里，这是在本来生活前端主管写的，自己写一遍熟悉一下：

var ani = {};

ani.transition = "all 0.4s ease"; //-webkit-transition
ani.transform = "translate3d(0, 0, 0)"; //-webkit-transform

CSS3(ani);

//输出结果 this.CSS3({"属性名":"属性值"，"属性名":"属性值"，"属性名":"属性值"})
//{"属性名":"属性值"，"属性名":"属性值"，"属性名":"属性值"}

使用情况1：this.imgList.css(this.CSS3(ani));

使用情况2：this.imgList.css(this.CSS3("transition","all 0.4s ease"));

function CSS3(){
　　var prefix=["-webkit-","-o-","-ms-","-moz-"],
　　o={};
　　if("string"==typeof(argument[0])){
　　　　o[argument[0]]=argument[1];
　　}else{
　　　　o=argument[0];
　　}
　　for(var i=0,lth=prefix.length;i<lth;i++){
　　　　for(var k in o){
　　　　　　o[prefix+k]=o[k];
　　　　}
　　}
　　return o;
}