如何將事件添加到自動旋轉圖像？

Question

我正在使用以下腳本和以後的onclick事件。如果我使用onclick，我的旋轉橫幅會丟失，並開始以隨機間隔顯示圖片。我想我應該在第一段代碼的末尾重寫「setTimeout」。問題是如何？

<script language="JavaScript" type="text/javascript"> 
<!-- 
var RotatingImage1_Index = -1; 
var RotatingImage1_Images = new Array(); 
RotatingImage1_Images[0] = ["images/ban_image1.png","",""]; 
<!-- 15 Images in total--> 
RotatingImage1_Images[14] = ["images/ban_image2.png","",""]; 

function RotatingImage1ShowNext(){ 
RotatingImage1_Index = RotatingImage1_Index + 1; 
    if (RotatingImage1_Index > 14) 
    RotatingImage1_Index = 0; 
    eval("document.RotatingImage1.src = RotatingImage1_Images[" + RotatingImage1_Index + "][0]"); 
    setTimeout("RotatingImage1ShowNext();", 4000);} 
// --> 
</script> 
<img src="images/ban_image1.png" id="ban_img1" name="RotatingImage1"> 

這部分工作，因爲它應該。

<div id="ban_next" align="left"> 
<a href="#" onclick="RotatingImage1ShowNext();return false;"> 
<img src="images/ban_next.png" id="ban_nxt1"></a></div> 

這部分也適用，但只有在將'setTimeout'設置爲'0'時才正確。我很抱歉，我完全是這個新手。我在看this stackoverflow.com question，但我不知道如何在這裏實現。

我提前感謝你。

編輯： 旋轉圖像自動啓動。它每4秒顯示一個新圖像。圖像上有文字，或更好的內幕笑話。讀者應該嘗試閱讀它們，但是如果自動旋轉在那裏發生，必須保持整整一分鐘才能看到所有圖像。這可能會很長。所以我想實現一個按鈕來覆蓋計時器並顯示下一個圖像'點擊'。但點擊後，旋轉時間應該變回自動旋轉。這是計劃。

謝謝Prusse，現在它睡覺時，我會盡量把握你的答案明天;）

Answer 1

你不需要的eval，只是做document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0]。

所描述的行爲發生是因爲有多個定時器觸發。第一次有一套RotatingImage1ShowNext被調用，每次從你的onclick處理函數調用它時會多一個。要解決此問題，請爲您的計時器聲明一個全局值，並在設置另一個超時值之前將其清除。像：

var global_timerid; 
function RotatingImage1ShowNext(){ 
    //RotatingImage1_Index = RotatingImage1_Index + 1; 
    //if (RotatingImage1_Index > 14) RotatingImage1_Index = 0; 
    RotatingImage1_Index = (RotatingImage1_Index + 1) % RotatingImage1_Images.length; 
    //document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0]; 
    document.getElementById('ban_img1').src = RotatingImage1_Images[RotatingImage1_Index][0]; 
    if (global_timerid) clearTimeout(global_timerid); 
    global_timerid = setTimeout(RotatingImage1ShowNext, 4000); 
}