h5轮播图

<!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>h5拖拽</title>

<style>

*{

margin: 0;

padding: 0;

}

div{

width:16rem;

height:7.5rem;

position: relative;

}

#ul1{

width:64rem;

height: 7.5rem;

position: absolute;

left:0;

top: 0;

}

#ul1 li{

width:16rem;

height:7.5rem;

float: left;

font-size:2rem;

color: #fff;

line-height: 7.5rem;

text-align: center;

list-style: none;

}

</style>

<script>

(function(win,doc){

function change(){

doc.documentElement.style.fontSize=doc.documentElement.clientWidth*20/320+'px';

}

change();

win.addEventListener('resize',change,false);

})(window,document);

window.addEventListener('DOMContentLoaded',function(){

var oUl=document.getElementById('ul1');

var aLi=oUl.getElementsByTagName('li');

var x=0;

var iNow=0;

oUl.addEventListener('touchstart',function(ev){

oUl.style.transition='none';

var disX=ev.targetTouches[0].pageX-x;

var downX=ev.targetTouches[0].pageX;

function fnMove(ev){

x=ev.targetTouches[0].pageX-disX;

oUl.style.transform='translateX('+x+'px)';

}

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='translateX('+x+'px)';

oUl.style.transition='200ms all ease';

document.removeEventListener('touchmove',fnMove,false);

document.removeEventListener('touchend',fnEnd,false);

}

document.addEventListener('touchmove',fnMove,false);

document.addEventListener('touchend',fnEnd,false);

ev.preventDefault();

},false);

},false);

</script>

</head>

<body>

<div>

<ul id="ul1">

<li style="background: red">1</li>

<li style="background: yellow">2</li>

<li style="background: green">3</li>

<li style="background: blue">4</li>

</ul>

</div>

</body>

</html>
h5轮播图

推荐阅读更多精彩内容
