利用函式遞迴實現簡單的輪播圖效果
阿新 • • 發佈：2019-05-19
利用遞迴實現簡單的輪播圖效果
對於初學者而言，提到輪播圖，首先想到到的是利用for迴圈和定時器來實現圖片的迴圈播放，但是實踐證明，在for迴圈中使用定時器並不能實現圖片之間的過度和圖片的迴圈播放。那麼輪播圖該怎樣實現呢？
在js中，遞迴實際也是一種迴圈，而且如果不設定限制條件，遞迴是一個死迴圈。
遞迴函式就是在函式內部呼叫函式自身。
下面就用遞迴函式做一個簡單的輪播圖。
首先建立一個html檔案，引入幾張圖片
最後一張和第一張圖片是一樣的，是為了更好地顯示過渡的效果
<body> <div class="box"> <ul id="list"> <li><img src="imgs/1.jpg"></li> <li><img src="imgs/2.jpg"></li> <li><img src="imgs/3.jpg"></li> <li><img src="imgs/4.jpg"></li> <li><img src="imgs/5.jpg"></li> <li><img src="imgs/6.jpg"></li> <li><img src="imgs/7.jpg"></li> <li><img src="imgs/1.jpg"></li> </ul> </div> </body>
設定一下基本樣式
.box{ width: 600px; height: 320px; border: 2px solid red; margin:20px auto; overflow: hidden; } /* 調整li尺寸與顯示框相同大小，並讓li橫向並排顯示 */ .box ul{ width: 4800px; position: relative; left:0px; } .box ul li{ float: left; width: 600px; height: 320px; background-color: aqua; } /* li中圖片大小與li視窗大小一致 */ #list li img{ width: 600px; height: 320px; }
下面來寫js
我是將函式進行了封裝，已便後期重複使用。
下面是函式使用的引數：
- move 一次性移動的距離（有正負之分）
- yctime 延遲時間（單位：毫秒）
- gdTime 過度時間（單位：秒）
- num 表示li的個數
// 獲取ul標籤 var list = document.getElementById("list"); // 獲取li標籤的寬度（每一次需要移動的距離） var oLi = list.children; var oLiMove = oLi[0].scrollWidth; var num = oLi.length; // 建立函式 function oMove(move,num,yctime,gdTime){ // 設定ul的相對行為初始值 list.style.transition =0 + "s"; list.style.left = 0 + "px"; var a = 0; function omove(){ a = a - Number(move); console.log(a) list.style.transition =0.8 + "s"; list.style.left = a + "px"; if(a <= -move * num) { clearInterval(setIn); // 遞迴函式 oMove(move,num,yctime,gdTime); } } // 插入時間貞 var setIn = setInterval(omove,yctime); // 設定懸停（滑鼠懸浮事件） list.onmouseover = function(){ clearInterval(setIn); console.log(1); } // 設定移除開始迴圈 list.onmouseout = function(){ setIn = setInterval(omove,yctime); console.log(2); } } oMove(oLiMove,num,2000,0.8);
整個函式是一個封裝的函式，傳入對應的引數便可直接使用。
需要注意的點：當設定條件停止迴圈或者重新啟動迴圈時，（以滑鼠懸浮為例）當滑鼠移出是，讓迴圈繼續，就必須給setIn重新賦值，否則setIn和滑鼠移除事件函式中的迴圈同時發生，就會出現多個迴圈同時進行，導致圖片混亂。
下面使用的一點編寫思路，僅供參考：
需求分析：
- 圖片間隔1S自動迴圈播放.
- 滑鼠放在上面時播放停止 .
思路：
通過ul的相對位置的迴圈移動，實現圖片展示效果的迴圈.
- 建立函式.
- 設定ul的初始位置，引入引數來儲存移動距離
- 建立函式，設定ul的移動，並將其轉換成ul的相對定位
- 插入時間貞，讓omove每隔1s執行一次
- 函式中設定停止條件，當最後一個圖中展示完成時結束迴圈，並開始下一輪迴圈
所用知識點：
定時器：setInterval()，解除定時 clearInterval，遞迴函式
希望本段分享可以給大家帶來幫助，歡迎大家提出意見和建議。謝謝