移动端触屏轮播图（完善版）

浏览数：28 / 时间：2015年06月11日

技术分享

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320,user-scalable=no" />

<title>ios 轮播图简版</title>
<style>
*{ margin:0; padding:0;}
ul,li{margin:0; padding:0;list-style:none;}

#outer{ width:800px; height:440px; margin:10px auto 0; position:relative; overflow:hidden; border:1px solid #666; background:#999;}
#inner{  position:absolute; left:0; top:1px; }
#inner li{ width:800px; height:448px; float:left;  overflow:hidden;}
#inner li img{width:800px; height:438px; }
#selects{ position:absolute; bottom:20px; right:50px;  z-index:666;}
#selects span{ float:left; padding:5px; background:#fff; margin-right:5px; border-radius:50%;}
#selects  .on{background:red;}
.translateZ{ -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}
</style>
</head>

<body>
<div id="outer">
	<ul id="inner">
    	<li><a href="https://www.qq.com"   target="_blank">  <img src="../../images/love5.jpg"></a></li>
        <li><a href="https://www.baidu.com" target="_blank"><img src="../../images/love4.jpg"/></a></li>
        <li><a href="https://www.sina.com" target="_blank"><img src="../../images/love3.jpg"/></a></li>
        <li><a href="https://www.163.com"  target="_blank">  <img src="../../images/106442464.jpg"/></a></li>
        <li><a data-href="http://www.baidu.com" ontouchmove="this.s=1;" ontouchend="this.s||window.open(this.dataset.href);this.s=0"> <img src="../../images/love1.jpg"/></a></li>
    </ul>
    <div id="selects"><span class="on"></span><span></span><span></span><span></span><span></span></div>
</div>
<!--<script src="mov3.js"></script>-->
<script src="../../js/jquery-1.9.1.min.js"></script>
<script>

  function getStyle(obj,attr){
        return  obj.currentStyle? obj.currentStyle[attr]: getComputedStyle(obj,false)[attr];    
   }


window.onload = function(){
	var outer = document.getElementById(‘outer‘);
	var inner = document.getElementById(‘inner‘);
	var aLi = inner.getElementsByTagName(‘li‘);
	var w = parseInt(aLi[0].offsetWidth);
	var innerWid=inner.style.width = aLi.length * w + ‘px‘;
	var iNow=0;
	var startX = 0;
	var downLeft = 0;
	var bBtn=true;
	var startTime=0
	var maxDiatance=parseInt(w)-parseInt(innerWid);
	var nowLeft=0;
	
	//document.ontouchmove = function(e){
		//e.preventDefault();
	//};
	
	inner.addEventListener("touchstart",function(e){
		var self=this;
		var e=e||window.event;
		var touchs = e.changedTouches[0]; //手指头的一个
		startX = touchs.pageX||touchs.clientX;
	    downLeft= parseInt(getStyle(self,‘left‘)); //获取的是21px 带单位的  		//downLeft = this.offsetLeft;     this.offsetLeft获取不到border 以及padding
		var isMoveScale=false;
		
		inner.addEventListener("touchmove",move,false);	
		inner.addEventListener("touchend",end,false);
		
		
		function move(e){
			   var e=e||window.event;
               if (e.touches.length > 1 || e.scale && e.scale !== 1) return;// // 当屏幕有多个touch或者页面被缩放过，就不执行move操作
 
			   var touchs = e.changedTouches[0];
				   startTime=+new Date; // startTime=Date.now();//html5
			       nowLeft=parseInt((touchs.pageX-startX)),
			       self=this;
				self.classList.add(‘translateZ‘);   
			   if(downLeft>=0){//如果从左侧向右到尽头  增加阻力
			           if(isMoveScale){//修复跳跃问题 重置被缩小的 startX
							startX = touchs.pageX||touchs.clientX;
							isMoveScale=false;
						}
				        self.style.left=nowLeft/5+‘px‘;
						
				  }else if(downLeft<= maxDiatance){   //增加阻力
				        if(isMoveScale){//修复跳跃问题 重置被缩小的 startX
							startX = touchs.pageX||touchs.clientX;
							isMoveScale=false;
						}
				        self.style.left=parseInt(nowLeft/5)+maxDiatance+‘px‘;
						
				  }else { 
				        self.style.left=nowLeft+downLeft+‘px‘;	   
			   }
			e.preventDefault();  
		 }
		
		
		function end(e){
		    var e=e||window.event,
			 touchs = e.changedTouches[0],
			 self=this,
		     aboveY=parseInt(self.style.left);
			 
			  if(aboveY>0){
                       $(inner).animate({left:0},200,function(){
							    self.classList.remove(‘translateZ‘); //移除 GPU hack
							    });  
                    }
			  if(aboveY<0&&aboveY<maxDiatance){
                        $(inner).animate({left:maxDiatance+‘px‘},200,function(){
							    self.classList.remove(‘translateZ‘);  //移除 GPU hack
							    }); 
                    }   
			var toLeft=touchs.pageX||touchs.clientX;
			if(toLeft<startX){//右侧往左边滑动  滑动距离大于一定 或者 滑动时间小于250毫秒
			    if(iNow!=aLi.length-1){
					
					if(Math.abs(nowLeft)>parseInt(w/3)||+new Date-startTime<200&&Math.abs(nowLeft)>30){
			        iNow++;
					//document.title=‘滑动了‘+nowLeft+‘/‘+w/3+(nowLeft>w/3);
					}
					$(inner).stop(true,false).animate({left:-iNow*w+‘px‘},400);
				}
				}else{ //左边往右侧滑动
				 if(iNow!=0){
					if(Math.abs(nowLeft)>parseInt(w/3)||+new Date-startTime<200&&Math.abs(nowLeft)>30){
			        iNow--;
					}

				   $(inner).stop(true,false).animate({left:-iNow*w+‘px‘},400);
				}
			}	
			
			//小圆点样式
			var selects=document.getElementById("selects"),
			    spans=selects.getElementsByTagName("span"),
			     i=0;
			for(;i<spans.length;i++){
			  	spans[i].className=‘‘;
			}
			spans[iNow].className=‘on‘;
			
			
			self.removeEventListener("touchmove",move,false);
			self.removeEventListener("touchend",end,false);	
		   
		  };		
		
	 });// touchstart end
		
		
		
	
	
};
</script>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

移动端触屏轮播图（完善版）