手机端的轮播效果

<section class="page pageshow">
<section id="tabPic">
<ul id="picList">
<li href="javascript:;"><img src="image/1.jpg" alt=""></li>
<li href="javascript:;"><img src="image/2.jpg" alt=""></li>
<li href="javascript:;"><img src="image/3.jpg" alt=""></li>
<li href="javascript:;"><img src="image/4.jpg" alt=""></li>
<li href="javascript:;"><img src="image/5.jpg" alt=""></li>
</ul>
<section class="picMask">
<p>成都九寨沟</p>
<nav>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</nav>
</section>
</section>
</section>

*{margin:0px;padding:0px;}
ul{list-style:none;}
#tabPic { position:relative; overflow:hidden;}
#picList { width:500%; }
#picList li{ width:20%; float:left;}
#picList li img { width:100%; height:342px;}
.picMask{ height:102px; position:absolute;left:0px; bottom:0; width:100%; background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.8) 10%,rgba(0,0,0,0))}
.picMask p {font-size:29px;line-height:120px; color:#fff; text-indent:26px;}
.picMask nav { position:absolute; right:26px; top:56px;}
.picMask nav a { width:10px; height:10px; background:white; border-radius:5px; float:left; margin-left:15px;}

function id(obj) {
return document.getElementById(obj);
}
function bind(obj, ev, fn) {
if (obj.addEventListener) {
obj.addEventListener(ev, fn, false);
} else {
obj.attachEvent('on' + ev, function() {
fn.call(obj);
});
}
}
function view() {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
};
}
function addClass(obj, sClass) {
var aClass = obj.className.split(' ');
if (!obj.className) {
obj.className = sClass;
return;
}
for (var i = 0; i < aClass.length; i++) {
if (aClass[i] === sClass) return;
}
obj.className += ' ' + sClass;
}

function removeClass(obj, sClass) {
var aClass = obj.className.split(' ');
if (!obj.className) return;
for (var i = 0; i < aClass.length; i++) {
if (aClass[i] === sClass) {
aClass.splice(i, 1);
obj.className = aClass.join(' ');
break;
}
}
}
function fnTab()
{
var oTab=id("tabPic");
var oList=id("picList");
var aNav=oTab.getElementsByTagName("nav")[0].children;
var iNow=0;
var iX=0;
var iW=view().w;
var oTimer=0;
var iStartTouchX=0;
var iStartX=0;
bind(oTab,"touchstart",fnStart);
bind(oTab,"touchmove",fnMove);
bind(oTab,"touchend",fnEnd);
auto();
if(!window.BfnScore)
{
fnScore();
window.BfnScore=true;
}
function auto()
{
oTimer=setInterval(function(){
iNow++;
iNow=iNow%aNav.length;
tab();
},2000);
}
function fnStart(ev)
{
oList.style.transition="none";
ev=ev.changedTouches[0];
iStartTouchX=ev.pageX;
iStartX=iX;
clearInterval(oTimer);
}
function fnMove(ev)
{
ev=ev.changedTouches[0];
var iDis=ev.pageX-iStartTouchX;
iX=iStartX+iDis;
oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
}
function fnEnd()
{
iNow=iX/iW;
iNow=-Math.round(iNow);
if(iNow<0)
{
iNow=0;
}
if(iNow>aNav.length-1)
{
iNow=aNav.length-1;
}
tab();
auto();
}
function tab()
{
iX=-iNow*iW;
oList.style.transition="0.5s";
oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
for(var i=0;i<aNav.length;i++)
{
removeClass(aNav[i],"active");
}
addClass(aNav[iNow],"active");
}
}