<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<style type="text/css">
.wrap{width: 3.75rem;height:3rem;position: relative;overflow: hidden;}
.list{width: 37.5rem;position: absolute;left: 0;top: 0;}
.list li{width:3.75rem;height: 3rem;float: left;}
img{width: 100%;height: 100%;}
.pic{position: absolute;bottom: 0;width:3.75rem;left: 1rem;}
.pic a{float:left;margin:0.1rem;width: 0.2rem;height: 0.2rem;background: red;}
.pic a.light{background: #fff;}
</style>
<script type="text/javascript">
(function(){
var html=document.documentElement;
html.style.fontSize=html.clientWidth/3.75+'px';
})();
document.addEventListener('touchstart',function(e){
e.preventDefault();
})
</script>
</head>
<body>
<section class="wrap">
<ul class="list">
<li><img src="../img/hd4.jpg"/></li>
<li><img src="../img/hd5.jpg"/></li>
<li><img src="../img/hd6.jpg"/></li>
<li><img src="../img/hd7.jpg"/></li>
<li><img src="../img/hd8.jpg"/></li>
<li><img src="../img/hd4.jpg"/></li>
<li><img src="../img/hd5.jpg"/></li>
<li><img src="../img/hd6.jpg"/></li>
<li><img src="../img/hd7.jpg"/></li>
<li><img src="../img/hd8.jpg"/></li>
</ul>
<div class="pic">
<a class="light" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</section>
<script type="text/javascript">
var wrap=document.querySelector('.wrap');
var list=document.querySelector('.list');
var pic=document.querySelectorAll('a');
var disX=0;
//获取到父元素的左边距
var oList=0;
var num=0;
//获取容器的宽度
var len=wrap.offsetWidth;
//li的个数
var listLen=list.children.length;
var n=0;
//给元素绑定事件
list.addEventListener('touchstart',start);
list.addEventListener('touchmove',move);
list.addEventListener('touchend',end);
function start(ev){
var e=ev.changedTouches[0];
disX=e.pageX;
oList=this.offsetLeft;
list.style.transition='none';
if(num==0){
num=pic.length;
oList=-num*len;
}
if(-num==listLen-1){
num=pic.length-1;
oList=-num*len;
}
}
function move(ev){
var e=ev.changedTouches[0];
list.style.left=e.pageX-disX+oList+'px';
}
function end(){
oList=this.offsetLeft;
num=Math.round(oList/len);
list.style.transition='.5s';
list.style.left=num*len+'px';
//滑块的控制
pic[n%pic.length].className='';
pic[-num%pic.length].className='light';
n=-num;
}
</script>
</body>
</html>
