選擇排列圖像並繼續

這裏是第一次使用JavaScript編碼器。選擇排列圖像並繼續

嘗試解決此問題，以便在單擊該圖像的適當按鈕後顯示圖像，然後該功能繼續顯示陣列和循環中的其他圖像。

例如，如果橫幅顯示圖像4，並且用戶單擊圖像2的按鈕，則橫幅應顯示圖像2，然後旋轉顯示圖像3並繼續循環。

下面是代碼：

var i = 0; 
var baners = new Array(); 
baners.push('banner1.jpg'); 
baners.push('banner2.jpg'); 
baners.push('banner3.jpg'); 
baners.push('banner4.jpg'); 
baners.push('banner5.jpg'); 



function swapImage(){ 
var img = document.getElementById("banner"); 
    img.src = baners[i]; 
    if (i<(baners.length-1)){i++; 
    }else{ 
     i=0; 
    } 

setTimeout('swapImage()', 2000);   

} 



function button1(){ 
    var img = document.getElementById("banner"); 
    img.src = baners[0] 

}

我不確定是否有可能使一個全局函數的5個按鈕。

謝謝！

來源

2014-02-05 MostOner

抓取按鈕的索引並將其與數組索引匹配 –

它顯示所選圖像，但該功能通過索引保持滾動並且不遵循順序。 – MostOner

順便說一下，'baners'應拼寫'banners'，並且每次只使用'setInterval（swapImage，2000）'而不是''eval''字符串。 – Bergi

我不確定是否有可能爲5個按鈕創建一個全局函數。

是的。使用這樣的事情：

function buttonClicked(number) { 
    var img = document.getElementById("banner"); 
    img.src = baners[number] 
    i = number; // set current loop position 
}

然後調用buttonClicked(0)從按鈕1，buttonClicked(1)從BUTTON2等。如果要使用for循環自動將處理程序附加到按鈕，請查看JavaScript closure inside loops – simple practical example。

來源

2014-02-05 16:54:44 Bergi

謝謝！這正是我需要的。它現在像一種魅力。 – MostOner

我只是有一個問題，執行此操作時，間隔加倍。任何想法爲什麼？他們都在2秒內工作，但按下按鈕需要4秒來加載下一個圖像，然後再次2秒。 – MostOner

在你的'swapImage'循環中，你只是在更改圖像後更新''i''，因此在調用'buttonClicked'後，下一個交換將不會改變任何內容。我沒有想到這一點，但實際上我認爲它比用戶點擊後僅顯示一個小於2秒的橫幅更具用戶友好性:-) – Bergi

選擇排列圖像並繼續

回答

相關問題