bootstrap图片轮播&触摸滑动事件

下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。

    
    

        

        

        

    
   
    
    

        

            
        
        

            
        
        

            
        
    
    
     
    ›

bootstrap的轮播，官方文档里没有看到关于touch事件的处理方法，但是手机流行的现在，很多地方都要用到。

一般情况下，只要你按照顺序加载了jqury1.9.1版本以上，也加载了bootstrap.min.js,并且jqury在前的情况，只要加入如下代码就可以了。

$(document).ready(function(){  
                var startX,endX;//声明触摸的两个变量  
                var offset = 30;//声明触摸距离的变量  
                $('.carousel-inner').on('touchstart',function (e) {  
                    startX= e.originalEvent.touches[0].clientX;//当触摸开始时的x坐标；  
                });  
                $('.carousel-inner').on('touchmove',function (e) {  
                    endX = e.originalEvent.touches[0].clientX;//当触摸离开时的x坐标；  
                });  
                $('.carousel-inner').on('touchend',function (e) {  
                    //当触摸完成时进行的事件；  
                    var distance = Math.abs(startX - endX);//不论正负，取值为正值；  
                    if (distance > offset){  
                        if(startX > endX){  
                            $('#myCarousel').carousel('next');//当开始的坐标大于结束的坐标时，滑动到下一附图  
                        }else{  
                            $('#myCarousel').carousel('prev');//当开始的坐标小于结束的坐标时，滑动到上一附图  
  
                        }  
                                  
                    }  
                });   
            });  

这样就可以实现移动端轮播图和手指左右滑动！！！