利用遞歸實現簡單的輪播圖效果
對於初學者而言，提到輪播圖，首先想到到的是利用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，遞歸函數
希望本段分享可以給大家帶來幫助，歡迎大家提出意見和建議。謝謝！