js自動輪播圖片的兩種迴圈方法（原創）

標籤：alt   get   div   ack   else   auto   分析   relative   play   

用5個div，布局從左至右5張圖片，從左至右5個div分別指定ID為img1，img2，img3，img4，img5.（背景是relative，5個div是相對於背景absolute定位）

顯示如下：

方法一：（把一個div直接賦值給另一個，輪播一次要for迴圈5下）

 1 function autoplay(){ 2             var x,y,baoliu; 3             baoliu=document.getElementById("img5").style.backgroundImage; 4             for(i=5;i>0;i--){ 5                 y=document.getElementById("img"+i); 6                 if(i==1){ 7                     x=baoliu; 8                     y.style.backgroundImage=x; 9                 }10                 else{11                     x=document.getElementById("img"+(i-1));12                     y.style.backgroundImage=x.style.backgroundImage;13                 }14             }15         }

方法二：（兩兩互相交換，輪播一次for迴圈4下）

 1 function autoplay(){ 2             var x,y,baoliu; 3             for(i=5;i>1;i--){ 4                 x=document.getElementById("img"+(i-1)); 5                 y=document.getElementById("img"+i); 6                 baoliu=y.style.backgroundImage; 7                 y.style.backgroundImage=x.style.backgroundImage; 8                 x.style.backgroundImage=baoliu; 9             }10         }

輪播一次的結果：

關於這兩種方法到底孰優孰劣，有待精學後分析。

js自動輪播圖片的兩種迴圈方法（原創）