<p>现在图片走马灯和轮播的效果越来越多了，很多人都是直接拿来插件就用，也不知道原理是什么。今天小编就给大家介绍下走马灯的原理以及原生js的demo。首先看下效果图：可以鼠标左右点击实现切换，也可以点击下面的图片实现切换。主要的脚本：</p><p>functiongetByClass(oParent,sClass)//通过class获取元素{varaEle=oParent.getElementsByTagName('*');varaResult=[];for(vari=0;i<aEle.length;i++){if(aEle[i].className==sClass){aResult.push(aEle[i]);}}returnaResult;}window.onl劳务派遣系统软件d=function()//页面加载好的时候触发{varoDiv=document.getElementById('playimages');varoBtnPrev=getByClass(oDiv,'prev')[0];varoBtnNext=getByClass(oDiv,'next')[0];varoMarkLeft=getByClass(oDiv,'mark_left')[0];varoMarkRight=getByClass(oDiv,'mark_right')[0];varoDivSmall=getByClass(oDiv,'small_pic')[0];varoUlSmall=oDivSmall.getElementsByTagName('ul')[0];varaLiSmall=oDivSmall.getElementsByTagName('li');varoUlBig=getByClass(oDiv,'big_pic')[0];varaLiBig=oUlBig.getElementsByTagName('li');varnowZIndex=2;varnow=0;oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';//左右按钮oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){startMove(oBtnPrev,'opacity',100);};oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){startMove(oBtnPrev,'opacity',0);};oBtnNext.onmouseover=oMarkRight.onmouseover=function(){startMove(oBtnNext,'opacity',100);};oBtnNext.onmouseout=oMarkRight.onmouseout=function(){startMove(oBtnNext,'opacity',0);};//大图切换for(vari=0;i<aLiSmall.length;i++){aLiSmall[i].index=i;aLiSmall[i].onclick=function(){if(this.index==now)return;now=this.index;tab();};aLiSmall[i].onmouseover=function(){startMove(this,'opacity',100);};aLiSmall[i].onmouseout=function(){if(this.index!=now){startMove(this,'opacity',60);}};}functiontab(){aLiBig[now].style.zIndex=nowZIndex++;for(vari=0;i<aLiSmall.length;i++){startMove(aLiSmall[i],'opacity',60);}startMove(aLiSmall[now],'opacity',100);aLiBig[now].style.height=0;startMove(aLiBig[now],'height',320);if(now==0){startMove(oUlSmall,'left',0);}elseif(now==aLiSmall.length-1){startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);}else{startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);}}oBtnPrev.onclick=function(){now--;if(now==-1){now=aLiSmall.length-1;}tab();};oBtnNext.onclick=function(){now++;if(now==aLiSmall.length){now=0;}tab();};vartimer=setInterval(oBtnNext.onclick,2000);oDiv.onmouseover=function(){clearInterval(timer);};oDiv.onmouseout=function(){timer=setInterval(oBtnNext.onclick,2000);};};</p><p>其中move方法以前已经发表过了这里就不做多的解释。html标签：<divid="playimages"class="play"><ulclass="big_pic"><divclass="prev"></div><divclass="next"></div><divclass="text">加载图片说明……</div><divclass="length">计算图片数量……</div><aclass="mark_left"href="javascript:;"></a><aclass="mark_right"href="javascript:;"></a><divclass="bg"></div><listyle="z-index:1;"><imgsrc="images/1.jpg"/></li><li><imgsrc="images/2.jpg"/></li><li><imgsrc="images/3.jpg"/></li><li><imgsrc="images/4.jpg"/></li><li><imgsrc="images/5.jpg"/></li><li><imgsrc="images/6.jpg"/></li></ul><divclass="small_pic"><ulstyle="width:390px;"><listyle="filter:100;opacity:1;"><imgsrc="images/1.jpg"/></li><li><imgsrc="images/2.jpg"/></li><li><imgsrc="images/3.jpg"/></li><li><imgsrc="images/4.jpg"/></li><li><imgsrc="images/5.jpg"/></li><li><imgsrc="images/6.jpg"/></li></ul></div></div>起航劳务派遣系统编辑所撰。</p>
