移动端轮播

（这个轮播代码不是我自己所写，是偶然游览一个简友的主页看到的，今天刚看了事件，决定来逐行分析一下这个代码）
首先，移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为，所以我们要用到js中的与触摸操作有关的新事件。其实我们轮播的原理和以前相同，都是通过改变元素的位置来控制图片的出现，但让我们不是很上手的，是那些用于跟踪触摸的属性。

下面，我简单介绍一下与触摸相关的知识

触摸事件
  • touchstart：当手指触摸屏幕时触发，一只手指放在屏幕上也会触发
  • touchmove：当手指在屏幕上滑动时连续触发。在这个事件发生期间可以用preventDefault()可以阻止滚动。
  • touchend：手指从屏幕移开时触发。
  • touchcancel：当系统停止跟踪触发时触发。

上面这几个事件都会冒泡，也都可以取消。

属性
  • touches:表示当前跟踪的触摸操作的Touch对象的数组
  • targetTouches:特定于事件目标的Touch对象的数组。（简单点可以理解为手指触摸屏幕的位置）
  • changeTouches表示自上次触摸以来发生了什么改变的touch对象的数组。（手指离开的位置）

每个touch对象包括下列属性

  • clientX:触摸目标在视口中的x坐标
  • clientY:触摸目标在视口中的y坐标
  • identifier:标识触摸的唯一ID
  • pageX:触摸目标在页面中的x坐标
  • pageY:触摸目标在页面中的y坐标
  • screenX:触摸目标在页面中的x坐标
  • screenY:触摸目标在页面中的y坐标
  • target:触摸的dom节点目标
<!DOCTYPE html>
<html>
<head>
	<title>移动端轮播</title>
	<style type="text/css">
       * {
       	   margin: 0;
       	   padding: 0;
       }
       #box {
       	   width: 980px;
       	   overflow: hidden;
       	   position: relative;
       	   margin: 0 auto;
       }
       #box ul {
           width: 4900px;
           height: 100px;
           position: relative;
           transform: translateX(-980px);
           
       }
       #box ul li{
       	   width: 980px;
       	   height: 100px;
       	   float: left;
       	   list-style-type: none;
       	   text-align: center;
       	   color: #fff;
       	   line-height: 100px;
       	   font-size: 30px;
       }
	</style>
	<script type="text/javascript">
        window.onload = function() {
        	var box = document.getElementById('box');
        	var oUl = document.getElementsByTagName('ul')[0];
        	var aLi = oUl.children;//这样就可以把所有li标签获取到了
        	var iNow = 1;
            var x = -iNow*aLi[0].offsetWidth;//li标签的位置
            var bReady = true;
            oUl.addEventListener('touchstart',function(ev){//当手指触摸屏幕的时候触发事件，让li的位置随手指滑动而改变
            	if(bReady == false){return;}
            	bReady = false;  
                       	
            	var downX = ev.targetTouches[0].pageX; //记录触摸位置 
            	var disX = downX - x;//下一个li要移动到的位置
            	function fnMove(ev) {
            		x = downX-disX;
            		oUl.style.transform = 'translate3d('+x+'px,0,0)';
            	}
            	function fnEnd(ev){
            		var upX = ev.changedTouches[0].pageX;//离开的位置
            		if(Math.abs(upX - downX)>50){
                        //左边移动
                        if(upX - downX<0){
                            iNow++;
                            if(iNow==aLi.length){iNow=aLi.length-1;}
                        }else{
                        //右边移动
                            iNow--;
                            if(iNow==-1){iNow=0;}
                        }
                    }
                    x = -iNow*aLi[0].offsetWidth;
                    oUl.style.transform = 'translate3d('+x+'px,0,0)';
                    oUl.style.transition = '200ms all ease';
                    function tEnd(){
                        if(iNow==4){
                            iNow=1;
                        }
                        if(iNow==0){iNow=3;}
                        oUl.style.transition = 'none'
                        x = -iNow*aLi[0].offsetWidth;
                        oUl.style.transform = 'translate3d('+x+'px,0,0)';
                        bReady = true;
                    }    
                    oUl.addEventListener('transitionend',tEnd,false);
                    //释放内存
                    document.removeEventListener('touchend',fnEnd,false);
                    document.removeEventListener('touchmove',fnMove,false);

            	}
            	document.addEventListener('touchmove',fnMove,false);
                document.addEventListener('touchend',fnEnd,false);
                //阻止默认事件
                ev.preventDefault();
            },false);

        }
	</script>
</head>
<body>
  <div id="box"> 
    <ul>
    	<li style="background:green">3</li>
    	<li style="background:orange">1</li>
    	<li style="background:yellow">2</li>
    	<li style="background:green">3</li>
    	<li style="background:orange">1</li>
    </ul>
  </div> 
</body>
</html>
posted @ 2017-04-17 21:14  叫我小红依吧  阅读(142)  评论(0)  编辑  收藏  举报