0

スライド間に一時停止があるスライドショーを開発しようとしています。そこで、以下に示すように setTimeout ステートメントを使用しようとしています。これは、ボタンのクリック時に 10 秒間停止して 2.jpg を 1.jpg にスワップするように記述されています。しかし、今はうまくいきます。誰でも私を助けることができますか？ありがとう。

<html>
<head>
<script type="text/javascript">
var t;
function swap(newImage) {
  var fileName=newImage.toString()+".jpg"
  document.slideshow.src=fileName
  t=setTimeout("swap()",10000)
}
</script>
</head>  
<body> 
  <img name="slideshow" src="1.jpg" width="450" height="335" />
  <br /><br />
  <input type="button" onClick="swap('2')" value="Change image" /> 
  <br /><br />
</body>
</html>
4

3 に答える 3

6

ここにはいくつか問題があります。まず、 setTimeoutの最初のパラメーターで評価される引き渡しコードは推奨されません。代わりにコールバックを渡すことをお勧めします:

 setTimeout(function() { swap(); },10000);
 //Or
 setTimeout(swap,10000); //Passing the actual function as the callback

2 つ目は、タイムアウト内にパラメーターを指定せずに swap() メソッドを呼び出していることです。新しい画像ファイル名を (おそらくファイル名の配列を宣言して) 渡すか、パラメーターが設定されているかどうかを確認する必要があります。

function swap(newImage,element) { 
   if(newImage) {
       var fileName = newImage.toString()+".jpg"; 
       element.src = fileName;
   }
   t=setTimeout(this,10000) 
}

この関数は、最初の実行後は明らかに何もしません (新しい画像ファイル名が提供されないため)。配列を使用すると、複数のファイル名を反復処理できます。

var images = ['1.jpg','2.jpg','3.jpg'];
var slideshow = function(element, images, index) {
   if(!index || ( (index + 1) > images.length) ) index = 0;
   element.src = images[index];
   t = setTimeout(function(){
       slideshow(element, images, index + 1);
   },10000) 
};

//Fetch the image element the slideshow is running on
var element = document.slideshow; 
slideshow(element, images);

これにより、タイムアウトがキャンセルされるまで、アレイ内のイメージが切り替わり続けます。

于 2008-12-17T00:58:45.497 に答える
2

スワップ関数にはパラメーターが必要なため、setTimeout では機能しません。

于 2008-12-17T00:48:46.000 に答える
-1

スライドショーを行うのに Javascript は必要ありません。各画像を個別のページに配置し、次の 1 行を各ページの先頭の <head> セクションに追加するだけです。

<meta http-equiv="refresh" content="10;url=NextPage.html"/>

「10」は次のページに移動するまでの秒数、「NextPage.html」は次に表示する画像を含むページへのリンクです。

于 2008-12-17T05:14:14.717 に答える