bootstrap轮播实现滑动效果

加载了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');//当开始的坐标小于结束的坐标时，滑动到上一附图  
  
                        }  
                                  
                    }  
                });   
            });  
如果在引用jqury的同时引用了zepto.js会造成$符号的冲突，这时候，jqury可以把$的使用权转交出去，相印的$符号由你设置的代理符号代替，这里我直接用了jqury代替。代码如下[html] view plain copy<span style="white-space:pre">  </span>jQuery.noConflict(); //将变量$的控制权让给其它的js文件；  
<span style="white-space:pre">  </span>jQuery(document).ready(function(){  
                var startX,endX;//声明触摸的两个变量  
                var offset = 30;//声明触摸距离的变量  
                jQuery('.carousel-inner').on('touchstart',function (e) {  
                    e.preventDefault();//在触摸的同时，取消默认的click事件  
                    startX= e.originalEvent.touches[0].clientX;//当触摸开始时的x坐标；  
                });  
                jQuery('.carousel-inner').on('touchmove',function (e) {  
                    e.preventDefault();  
                    endX = e.originalEvent.touches[0].clientX;//当触摸离开时的x坐标；  
                });  
                jQuery('.carousel-inner').on('touchend',function (e) {  
                    //当触摸完成时进行的事件；  
                    var distance = Math.abs(startX - endX);//不论正负，取值为正值；  
                    if (distance > offset){  
                        e.preventDefault();  
                        if(startX > endX){  
                            jQuery('#myCarousel').carousel('next');//当开始的坐标大于结束的坐标时，滑动到下一附图  
                        }else{  
                            jQuery('#myCarousel').carousel('prev');//当开始的坐标小于结束的坐标时，滑动到上一附图  
                        }  
                                  
                    }  
                });   
            });  
并且，在上面的代码中，我同时还加入了[html] view plain copypreventDefault();//避免移动端的时候touch事件和click事件同时进行造成功能障碍。