2012-01-24 28 views
0

我有一個橫幅,其中有10張照片。我知道如何設置超時時間,以便圖片每隔一段時間切換一次,但是如何根據我希望顯示的個人圖片顯示多長時間來設置一個計時器來更改圖片。如何創建Javascript橫幅在不同時間切換圖片?

例如: 我希望圖片1顯示10秒,圖片2顯示3秒,圖片3顯示15秒。

這是我到目前爲止的代碼:(其在5秒等間隔改變所有圖像

的Javascript:

 window.onload = rotate;   
     var thisAd = 0;   
     var adImages = new Array("Images1/Picture10","Images1/Picture1","Images1 /Picture2","Images1/Picture3","Images1/Picture4","Images1/Picture5","Images1/Picture6","Images1/Picture7","Images1/Picture8","Images1/Picture9"); 

function rotate(){    
      thisAd++; 
      if(thisAd == adImages.lengh){ 
      thisAd = 0; 
      }  
      document.getElementById("adBanner").src = adImages[thisAd];  
      setTimeout(rotate, 5 * 1000); 
} 

回答

0

當你的timeing沒有邏輯無法創建一個通用算法所以你必須做一個開關/每個廣告否則如果。
您還必須重置計數器,thisAd,一個週期後。

var time; 
if(thisAd>9)thisAd=0; 
if(thisAd==0)time=10; 
else if(thisAd==1)time=3; 
else if(thisAd==2)time=15; 
... 
setTimeout(rotate, time * 1000); 
1

做一個次陣列,以配合您的圖像:

var adTimes = new Array(1000,5000,2000.....) 

在計時器

setTimeout(rotate, 5 * adTimes[thisAd]); 
2

你可以在你的照片存儲到對象有兩個屬性使用值:一個是URL,其他爲延遲,然後使用它。

var adImages = [ 
    { 
     url:"img1.png", 
     delay: 5 
    }, 
    { 
     url:"img2.png", 
     delay: 3 
    } 
]; 

然後就可以使用這些屬性:

var image = adImages[thisAd]; 
document.getElementById("adBanner").src = image.url; 
setTimeout(rotate, image.delay * 1000);