---恢复内容开始---
css样式如下:
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
html{
font-size: 20px;
}
#wrap{
width: 16rem;
height: 7rem;
margin: 0 auto;
overflow: hidden;
}
#wrap ul{
width: 80rem;
height: 7rem;
transform: translate3d(-16rem,0,0);
}
#wrap ul li{
width: 16rem;
height: 7rem;
color: white;
font-size: 30px;
text-align: center;
line-height: 7rem;
float: left;
}
</style>
script.js如下:
代码都有注释
DOMContentLoaded事件和load事件的区别。
load事件是window对象上的事件。指的是网页资源已经加载完毕（包括但不限于DOM、图片、音频、脚本、插件资源以及CSS）
DOMContentLoaded事件是document对象上的事件。指的是DOM已经加载完毕。IE中有个私有的事件onreadystatechange事件跟这个标准事件类似。
因此DOMContentLoaded事件都会比load事件提前触发。
parse()
用于从一个字符串中解析出json
JSON.stringify
用于从一个对象解析成字符串
<script> document.addEventListener(‘DOMContentLoaded‘,function(){ var oUl = document.querySelectorAll(‘#wrap ul‘)[0]; var aLi = oUl.children; var bSing = true; //储存当前在第一个页面 var iNow = 1; var x = -iNow * aLi[0].offsetWidth; oUl.addEventListener(‘touchstart‘,function(ev){ if (bSing == false)return; bSing = false; //手指按下的时候 var downX = ev.targetTouches[0].pageX; var disX = downX - x; function fnMove(ev){ x = ev.targetTouches[0].pageX - disX; //translate3d 开启手机滑动硬件加速 oUl.style.WebkitTransform =‘translate3d(‘ + x + ‘px,0,0)‘; }; function fnEnd(ev){ //清除两个事件 oUl.removeEventListener(‘touchmove‘,fnMove,false); oUl.removeEventListener(‘touchend‘,fnEnd,false); //手指抬起的时候 var upX = ev.changedTouches[0].pageX; //有个transition 动画效果 oUl.style.WebkitTransition = ‘all .3s ease‘; //从左到右滑动时是负数，所以要用Math.abs() if (Math.abs(upX - downX) > 80) { //切换到下一张 if (downX > upX) { //当前页面 ++ iNow ++; if (iNow == aLi.length)iNow = aLi.length - 1; } else{ //否则 -- iNow --; if (iNow == -1)iNow = 0; }; }; x = -iNow * aLi[0].offsetWidth; //再次执行transition 动画效果 oUl.style.WebkitTransform = ‘translate3d(‘ + x + ‘px,0,0)‘; //运动结束的标志 function moveEnd(){ bSing = true; //清除transition 动画效果 oUl.removeEventListener(‘transitionend‘,moveEnd,false); //左边 if(iNow == aLi.length - 1){ iNow = 1; x = -iNow * aLi[0].offsetWidth; oUl.style.WebkitTransition = ‘none‘; oUl.style.WebkitTransform = ‘translate3d(‘ + x + ‘px,0,0)‘; } //右边 if (iNow == 1) { iNow = 3; x = -iNow * aLi[0].offsetWidth; oUl.style.WebkitTransition = ‘none‘; oUl.style.WebkitTransform = ‘translate3d(‘ + x + ‘px,0,0)‘; } document.title = iNow; } //监听transition动画效果 oUl.addEventListener(‘transitioned‘,moveEnd,false); }; //监听move&end事件 oUl.addEventListener(‘touchmove‘,fnMove,false); oUl.addEventListener(‘touchend‘,fnEnd,false); //阻止默认事件 ev.preventDefault(); },false); },false); </script>
body内容如下:
<div id="wrap"> <ul> <li style="background: slateblue;">Slide 3</li> <li style="background: salmon;">Slide 1</li> <li style="background: skyblue;">Slide 2</li> <li style="background: slateblue;">Slide 3</li> <li style="background: salmon;">Slide 1</li> </ul> </div>
具体情况看自己需求，如有什么不明白私信或留言给我。
---恢复内容结束---
原文：http://www.cnblogs.com/Mousika/p/7242264.html