手机端的轮播效果
手机端轮播效果,貌似以后能用得上吧
首先是结构html
<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>
css
*{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;}
js代码
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"); } }