如上圖，JS實現(xiàn)簡單幻燈片的原理解析：幻燈片按我的理解來說就是能夠按順序自動循環(huán)切換或者手動點(diǎn)擊切換獲得下標(biāo)對應(yīng)大圖的特效。主要的方法就是：設(shè)置定時器，讓大圖每隔一段時間就切換一張，當(dāng)切換到最后一張時進(jìn)行判斷，讓下標(biāo)回零重新循環(huán)切換。直接上代碼解釋吧。

var timer=null; var now=0; //定義一個變量，為當(dāng)前幻燈片的索引值//開啟定時器，但一定記得開啟之前先關(guān)閉所有定時器 function auto(){clearInterval(timer);timer=setInterval(next,2000); } auto();function next(){now++;tab(); }function　tab(){//判斷當(dāng)前索引值如果大于或等于li的長度，說明已播放到了最后一張，讓now=0重新開始播放if(now>=oOLi.length){now=0;}//now<0的情況出現(xiàn)在當(dāng)前索引值為0，往左切換幻燈片的時候，此時應(yīng)該讓now的值為最后一張圖的索引，即li.length-1else if(now<0){now=oOLi.length-1;}//這里用for循環(huán)改變當(dāng)前l(fā)i的類名，類似與選項卡for(var i=0;i<oOLi.length;i++){oOLi[i].className='';}oOLi[now].className='active';//運(yùn)動函數(shù)，讓ul每次運(yùn)動-470*now的長度startMove(oUl,{left:-470*now}); }for(var i=0;i<oOLi.length;i++){oOLi[i].index=i;oOLi[i].onmouseover=function(){now=this.index;tab();} } //鼠標(biāo)經(jīng)過關(guān)閉定時器和鼠標(biāo)離開開啟定時器 oBan.onmouseover=function(){clearInterval(timer); } oBan.onmouseout=function(){auto(); } //鼠標(biāo)點(diǎn)擊左右切換幻燈片 oLeft.onclick=function(){clearInterval(timer);now--;tab();auto(); }oRight.onclick=function(){clearInterval(timer);now++;tab();auto(); }

總結(jié)

以上是生活随笔為你收集整理的JS实现简单幻灯片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。