<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端轮播图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
*{ margin:0; padding:0; list-style:none;}
html{ font-size:20px;}
#box{width:16rem;height:7.5rem; margin:0 auto; overflow:hidden;}
#box ul{width:64rem; overflow:hidden;}
#box ul li{width:16rem; height:7.5rem; float:left; text-align:center; line-height:7.5rem; font-size:2rem; color:#fff;}
</style>
<script>
//rem自适应转换
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document)
document.addEventListener('DOMContentLoaded',function () {
var oUl=document.querySelector('#box ul');
var aLi=oUl.children;
var x=0;
var n=0;
oUl.addEventListener('touchstart',function (ev) {
oUl.style.webkitTransform='none';
var downX=ev.targetTouches[0].pageX;
var disX=downX-x;
function fnMove(ev) {
x=ev.targetTouches[0].pageX-disX;
oUl.style.webkitTransform='translate3d('+x+'px,0,0)'
}
function fnEnd(ev) {
var upX=ev.changedTouches[0].pageX;
oUl.style.transition='0.4s all ease';
if(Math.abs(upX-downX)>50){
if(downX>upX){
n++;
if(n==aLi.length)n=aLi.length-1;
x=-n*aLi[0].offsetWidth;
oUl.style.webkitTransform='translate3d('+x+'px,0,0)'
}else{
n--;
if(n==-1)n=0;
x=-n*aLi[0].offsetWidth;
oUl.style.webkitTransform='translate3d('+x+'px,0,0)'
}
}
oUl.removeEventListener('touchend',fnEnd,false)
oUl.removeEventListener('touchmove',fnMove,false)
}
oUl.addEventListener('touchend',fnEnd,false)
oUl.addEventListener('touchmove',fnMove,false)
ev.preventDefault();
},false)
},false)
</script>
</head>
<body>
<div id="box">
<ul>
<li style=" background:red;">0</li>
<li style=" background:blue;">1</li>
<li style=" background:green;">2</li>
<li style=" background:#499;">3</li>
</ul>
</div>
</body>
</html>
