jQuery---手机端左滑右滑的实现

下面针对 web 端实现手机端的左滑右滑---使用框架bootstrap

---

本案例环境为 web 端开发适配手机端轮播图的左右滑动, 为了兼容多端设备采用 bootstrap 框架进行开发的.

• 首先使用图片展示

                                               

 

• 二话不多说下面为代码部分

1. html代码如下:
   
    

   <!-- 轮播图 banner-->
   <div class="z_banner">
       <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
           <!-- 指示点 -->
           <ol class="carousel-indicators">
               <!--TODO 动态渲染-->
           </ol>
           <!-- banner  图片 -->
           <div class="carousel-inner">
               <!--TODO 动态渲染-->
           </div>
           <!-- 上一页   下一页 -->
           <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
               <span class="glyphicon glyphicon-chevron-left"></span>
           </a>
           <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
               <span class="glyphicon glyphicon-chevron-right" ></span>
           </a>
       </div>
   </div>

    

2. jQuery 代码如下:
    

   //首选获取需要操作的对象  banner
   
   var $banner = $(".carousel");
   
   
   
   //	移动端的手势切换   左滑  右滑
   	
   var startX = 0;
   
   var moveX = 0;
   
   var distanceX = 0;
   
   var isMove = false;
   
   //手势触屏开始事件
   $banner.on("touchstart", function(e) {
       // console.log(e);
   	startX = e.originalEvent.touches[0].clientX;
   
   //手势触屏移动事件
   }).on("touchmove", function(e) {
   	moveX = e.originalEvent.touches[0].clientX - startX;
   	isMove = true;
   
   //手势离开屏幕事件
   }).on("touchend", function(e){
   	// 手势事件的条件
   	/*
   	* 1.滑动过的
   	* 2.移动的距离大于50px 认为是手势
   	*
   	* */
   		
   	if (isMove && Math.abs(moveX) >= 50){
   	//	满足条件
   		if (moveX > 0){
   
               // 使用  bootstrap  轮播图 API
   			//	右滑
   			$banner.carousel('prev');
   		} else {
   
               // 使用  bootstrap  轮播图 API
   			//	左滑
   			$banner.carousel('next');
   		}
   	};
   
   	startX = 0;
   	moveX = 0;
   	distanceX = 0;
   	isMove = false;
   });