加载了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代替。代码如下
- <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');//当开始的坐标小于结束的坐标时,滑动到上一附图
- }
- }
- });
- });
- preventDefault();//避免移动端的时候touch事件和click事件同时进行造成功能障碍。