自動回転イメージにイベントを追加するにはどうすればよいですか？

Question

私は次のスクリプトとそれ以降のonclick-eventを使用しています。私が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秒ごとに新しい画像が表示されます。画像にはテキストが表示されています。読者は読んでみるべきですが、もし自動化された回覧がそこに控えていたならば、すべてのイメージを見るために1分の間、その控えを保つ必要があります。それはおそらく長いです。だから私は、タイマーを上書きするためのボタンを実装し、次の画像を 'クリック'で表示することを考えました。しかし、クリック後、回転時間は自動回転に戻ります。それが計画です。あなたがdocument.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0]を行うだけで、evalを必要としない）

Answer 1

を、

はPrusseが、今それ就寝時のために、私は明日あなたの答えを把握しようとします、ありがとうございました。

上記の動作は、複数のタイマーが起動しているために発生します。最初にRotatingImage1ShowNextが呼び出されたときに1つのセットが呼び出され、そのたびに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); 
}