关于bootstrap图片轮播的触摸滑动事件

接触web前端有一段时间了，一直没有做过记录，有些问题解决后，一段时间又忘了，处理麻烦，为了自己，也为了与我遇到过同样问题的小白，我决定还是做个记录。

因为bootstrap的强大，所以我们公司的很多开发都是基于bootstrap.

一般都是边用边学，在赶项目的时候，有些功能不得不用熟悉的插件，这时候就会因为代码冲突，造成功能障碍。

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');//当开始的坐标小于结束的坐标时，滑动到上一附图

					    }
					        	
					}
				});	
			});

如果在引用jqury的同时引用了zepto.js会造成$符号的冲突，这时候，jqury可以把$的使用权转交出去，相印的$符号由你设置的代理符号代替，这里我直接用了jqury代替。代码如下

	jQuery.noConflict(); //将变量$的控制权让给其它的js文件；
	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');//当开始的坐标小于结束的坐标时，滑动到上一附图
					    }
					        	
					}
				});	
			});

并且，在上面的代码中，我同时还加入了

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