bootstrap轮播实现滑动效果

加载了bootstrap.min.js,并且jqury在前的情况，只要加入如下代码就可以了。

1.  $(document).ready(function(){  
2.                 var startX,endX;//声明触摸的两个变量  
3.                 var offset = 30;//声明触摸距离的变量  
4.                 $('.carousel-inner').on('touchstart',function (e) {  
5.                     startX= e.originalEvent.touches[0].clientX;//当触摸开始时的x坐标；  
6.                 });  
7.                 $('.carousel-inner').on('touchmove',function (e) {  
8.                     endX = e.originalEvent.touches[0].clientX;//当触摸离开时的x坐标；  
9.                 });  
10.                 $('.carousel-inner').on('touchend',function (e) {  
11.                     //当触摸完成时进行的事件；  
12.                     var distance = Math.abs(startX - endX);//不论正负，取值为正值；  
13.                     if (distance > offset){  
14.                         if(startX > endX){  
15.                             $('#myCarousel').carousel('next');//当开始的坐标大于结束的坐标时，滑动到下一附图  
16.                         }else{  
17.                             $('#myCarousel').carousel('prev');//当开始的坐标小于结束的坐标时，滑动到上一附图  
18.   
19.                         }  
20.                                   
21.                     }  
22.                 });   
23.             });  
24. 如果在引用jqury的同时引用了zepto.js会造成$符号的冲突，这时候，jqury可以把$的使用权转交出去，相印的$符号由你设置的代理符号代替，这里我直接用了jqury代替。代码如下
    [html]  view plain  copy

    1. <span style="white-space:pre">  </span>jQuery.noConflict(); //将变量$的控制权让给其它的js文件；  
    2. <span style="white-space:pre">  </span>jQuery(document).ready(function(){  
    3.                 var startX,endX;//声明触摸的两个变量  
    4.                 var offset = 30;//声明触摸距离的变量  
    5.                 jQuery('.carousel-inner').on('touchstart',function (e) {  
    6.                     e.preventDefault();//在触摸的同时，取消默认的click事件  
    7.                     startX= e.originalEvent.touches[0].clientX;//当触摸开始时的x坐标；  
    8.                 });  
    9.                 jQuery('.carousel-inner').on('touchmove',function (e) {  
    10.                     e.preventDefault();  
    11.                     endX = e.originalEvent.touches[0].clientX;//当触摸离开时的x坐标；  
    12.                 });  
    13.                 jQuery('.carousel-inner').on('touchend',function (e) {  
    14.                     //当触摸完成时进行的事件；  
    15.                     var distance = Math.abs(startX - endX);//不论正负，取值为正值；  
    16.                     if (distance > offset){  
    17.                         e.preventDefault();  
    18.                         if(startX > endX){  
    19.                             jQuery('#myCarousel').carousel('next');//当开始的坐标大于结束的坐标时，滑动到下一附图  
    20.                         }else{  
    21.                             jQuery('#myCarousel').carousel('prev');//当开始的坐标小于结束的坐标时，滑动到上一附图  
    22.                         }  
    23.                                   
    24.                     }  
    25.                 });   
    26.             });  
    并且，在上面的代码中，我同时还加入了
    [html]  view plain  copy

    1. preventDefault();//避免移动端的时候touch事件和click事件同时进行造成功能障碍。