touchSlider

浏览器的动画效果一般都是用js来控制元素的top,left,right,bottom等属性来实现，不过在移动浏览器上，鉴于对css3的支持，完全可以抢先使用css3 translate。不过需要注意的是，使用css translate在android上比较那个啥XX，在safari上，transalte2d的效果远远不如translate3d，所以，移动浏览器上，最好是使用translate3d来实现。
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title></title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1"/>
  7     <style type="text/css">
  8         *{margin: 0; padding: 0;}
  9         body{ width: 100%;}
 10         ul,li{ list-style: none;}
 11         input[type="button"]{ margin: 10px; width: 40px; height: 24px;}
 12         #page{ text-align: center;}
 13         .demo{ width: 100%; height: 200px; overflow: hidden;}
 14         .list{}
 15         .list li{ display: table-cell; height: 200px; }
 16         .list li:first-child{ background: #87ceeb;}
 17         .list li:last-child{ background: #8b4513;}
 18     </style>
 19 </head>
 20 <body>
 21 <div id="page">
 22     <div class="demo">
 23         <ul class="list">
 24             <li>1</li>
 25             <li>2</li>
 26         </ul>
 27     </div>
 28     <div class="demo">
 29         <ul class="list">
 30             <li>3</li>
 31             <li>4</li>
 32         </ul>
 33     </div>
 34 </div>
 35 <script type="text/javascript">
 36 
 37     window.TouchSlide = function(container){
 38         if(!container){ //没有外包装，直接返回
 39             return 1;
 40         }
 41         this.container = this._$(container);
 42         this.element   = this.container.children[0];
 43         this.slides    = this.element.children;
 44         this.index     = 0;
 45         this.init();
 46 
 47         var _this = this;
 48 
 49         this.element.addEventListener('touchstart',function(e){
 50             _this.touchstart(e);
 51         },false);
 52         this.element.addEventListener('touchmove',function(e){
 53             _this.touchmove(e);
 54         },false)
 55         this.element.addEventListener('touchend',function(e){
 56             _this.touchend(e);
 57         },false)
 58         window.addEventListener('resize', function(e){ //缩放屏幕的时候需要动态调整
 59             _this.init();
 60         }, false);
 61     }
 62     TouchSlide.prototype = {
 63         constructor : TouchSlide,
 64         _$ : function(el){
 65             return 'string' == el ? document.getElementById(id) : el;
 66         },
 67         init : function(){
 68             this.container.style.visibility = 'none';
 69             this.width = this.container.getBoundingClientRect().width;
 70             this.element.style.width = this.slides.length * this.width + 'px';
 71             var index = this.slides.length;
 72             while(index--){
 73                 this.slides[index].style.width = this.width + 'px';
 74             }
 75             this.container.style.visibility = 'visible';
 76         },
 77         slideTo : function(index, duration) {
 78             this.move(0,index,duration);
 79             this.index = index;
 80         },
 81         move : function(deltaX,index,duration){
 82             var style = this.element.style;
 83             style.webkitTransitionDuration = duration + 'ms';
 84             style.webkitTransform = 'translate3d(' + ( deltaX - index * this.width) + 'px,0,0)';
 85         },
 86         isValidSlide : function(){
 87             return Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 //在250ms内滑动的距离超过20px
 88                     || Math.abs(this.deltaX) > this.width/2 //或者滑动超过容器的一半宽度
 89         },
 90         isPastBounds : function(){
 91             return !this.index && this.deltaX > 0 //第一个，但是依旧向右滑动
 92                     || this.index == this.slides.length - 1 && this.deltaX < 0//最后一个，但是依旧向左滑动，这两种情况越界了，是无效的
 93         },
 94         touchstart : function(e){
 95             var touchEvent = e.touches[0];
 96             this.deltaX = 0;
 97             this.start = {
 98                 x    : touchEvent.pageX,
 99                 y    : touchEvent.pageY,
100                 time : Number(new Date())
101             } ;
102             this.isScrolling = undefined;
103             this.element.style.webkitTransitionDuration = 0;
104         },
105         touchmove : function(e){
106             this.deltaX = e.touches[0].pageX - this.start.x;
107             //判断是左右滑动还是上下滑动，上下滑动的话就无视
108             if(typeof this.isScrolling == 'undefined'){
109                 this.isScrolling = !!( this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY - this.start.pageY) );//判断是否是是竖直滚动
110             }
111             if(!this.isScrolling){
112                 e.preventDefault();
113                 this.deltaX = this.deltaX / (this.isPastBounds() ? 2 : 1);
114             }
115             this.move(this.deltaX,this.index,0);
116         },
117         touchend : function(e){
118             if (!this.isScrolling) {
119                 this.slideTo( this.index + ( this.isValidSlide() && !this.isPastBounds() ? (this.deltaX < 0 ? 1 : -1) : 0 ), 200 );
120             }
121         }
122     }
123 
124     Array.prototype.slice.call(document.getElementsByClassName('demo'),0).forEach(function(item){
125         new TouchSlide(item)
126     })
127 
128 </script>
129 </body>
130 </html>