移动端-轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			ul{list-style: none;}
			a{text-decoration: none;}
			html,body{height: 100%;overflow: hidden;}
			img{display: block;}
			#wrap{position: relative;}
			#wrap .list{
				position: absolute;
				top: 0;
				left: 0;
				overflow: hidden;
				/*width: 500%;*/
			}
			#wrap .list li{
				float: left;
			}
			#wrap .list li a img{
				width: 100%;
			}
			#wrap .nav{
				position: absolute;
				left: 0;
				bottom: 7px;
				width: 100%;
				height: 10px;
				text-align: center;
				line-height: 10px;
			}
			#wrap .nav span{
				display: inline-block;
				width: 10px;
				height: 10px;
				background: gray;
				border-radius: 50%;
				vertical-align: middle;
			}
			#wrap .nav .active{
				background-color: rgba(255,0,0,0.8);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul class="list">
				<li><a href="javascript:;"><img src="img/1.jpg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="img/2.jpg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="img/3.jpg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="img/4.jpg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="img/5.jpg" alt="" /></a></li>
			</ul>
			<div class="nav">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
	<script>
		//禁止鼠标的默认事件
		document.addEventListener("touchstart",function(event){
			event.preventDefault()
		});
		
		//加载完毕后执行以下的代码
		window.onload=function(){
		//获取元素
		var wrap=document.getElementById("wrap");
		var list=document.querySelector("#wrap .list");
		var liNodes=document.querySelectorAll("#wrap .list li");
		var spanNodes=document.querySelectorAll("#wrap .nav span");
		
		//布局的处理
		var style=document.createElement("style");
		style.innerHTML="#wrap{height: "+liNodes[0].offsetHeight +"px}";
		style.innerHTML+="#wrap .list{width: "+liNodes.length +"00%}";
		style.innerHTML+="#wrap .list li{width: "+100/liNodes.length+"%}";
		document.head.appendChild(style);
		
		//滑动
		//定义元素的初始位置
		var elemX=0;
		//定义手指的初始位置
		var startX=0;
		//定义鼠标距离差
		var dic=0;
		wrap.addEventListener("touchstart",function(event){
			var touch=event.changedTouches[0];
			//获取元素的初始位置
			elemX = list.offsetLeft;
			//获取手指的初始位置
			startX = touch.clientX;
		})
		wrap.addEventListener("touchmove",function(event){
			var touch=event.changedTouches[0];
			//获取手指的结束位置
			var endX=touch.clientX;
			//确定鼠标距离差
			dic=endX - startX;
			var left = elemX + dic;
			//确定手指最终的位置
			list.style.left = left + "px";
		});
		
		//滑动
		wrap.addEventListener("touchend",function(event){
			var touch=event.changedTouches[0];
			var now=0;
			var left=list.offsetLeft;
			
//			//以下 now=Math.round(-left/document.documentElement.clientWidth) 
//			也可以用以下代码代替，这样限定值就可以不必只为0.5

//			now=-left/document.documentElement.clientWidth;
//			var num=now-Math.floor(now);
//			if(dic<0){
//				if(num>0.5){
//			    	now=Math.ceil(now);
//			    }else if(num<0.5){
//			    	now=Math.floor(now);
//			    } 
//			}else if(dic>0){
//				if(num<0.5){
//					now=Math.floor(now);
//				}else if(num>0.5){
//					now=Math.ceil(now);
//				}	
//			}

            now=Math.round(-left/document.documentElement.clientWidth);
            //限定now的范围
           if(now<0){
           	  now=0
           }else if(now>liNodes.length-1){
           	  now=liNodes.length-1
           }
			list.style.left = -now * document.documentElement.clientWidth + "px";
			
			//添加滑动小圆点的特效，当图片滚动到指定位置时，小圆点处于这个位置，给目标圆点添加class
			for(var i=0;i<liNodes.length;i++){
				spanNodes[i].className="";
			}
			spanNodes[now].className="active";
		})
	}	
	</script>
</html>
猜你喜欢
