1

私は、3つの回転する画像で構成される単純なスライドショーを作成しようとしています。このスライドショーは、最後の画像が表示されるとすぐに、5000ミリ秒間隔で最初からやり直します。

<div id="slideshow">&nbsp;</div>

<script type="text/javascript">
var imageArray = ['Image1','Image2','Image3'];
var currentIndex = 0;

nextPic = function(currentIndex,slideshow) {

  var theHTML = '<img src="http://www.domain.com/Pics/Test-' + imageArray[currentIndex] + '.jpg">';
  document.getElementById("slideshow").innerHTML = theHTML;

  if (currentIndex < imageArray.length) {
      currentIndex = currentIndex + 1;
  }
    else {
      currentIndex = 0;
    }

  setTimeout("nextPic(" + currentIndex + ")", 5000);
}

nextPic(currentIndex, "slideshow");

</script>

私が見つけたJavascriptコードのすべてのバリエーションで、同じ結果が得られました。最後の画像（Test-Image3.jpg）の後、JSは、最初の画像にリセットする前に、未定義の画像（ "Test-undefined.jpg"）を表示しようとします。 。それ以外は完全にうまく機能し、かなり腹立たしいです。

4

3 に答える 3

0

配列の長さをチェックした後、追加するという事実を考慮する必要があります。

if (currentIndex < imageArray.length - 1) {
  currentIndex = currentIndex + 1;
}
else {
  currentIndex = 0;
}

また

currentIndex += 1;
if (currentIndex >= imageArray.length)
  currentIndex = 0;

ただし、関数はグローバル変数を使用するだけなので、実際にはパラメーターを渡す必要はありません。（持っていない方がいいですが、持っているので、使った方がいいかもしれません。）

于 2013-02-21T22:21:58.247 に答える
0

への変更：

  if (currentIndex < imageArray.length - 1) {
      currentIndex = currentIndex + 1;
  }

それ以外の場合は、を表示しようとするためimageArray[imageArray.length]です。

また、代わりに：

currentIndex = currentIndex + 1;

あなたはただ使うことができます：

currentIndex ++;
于 2013-02-21T22:22:29.087 に答える
0

setInterval（）を使用したよりクリーンな実装：

var slide = function(){
   //check if we are at the end of the array, either stop or replay.                               
   if (currentIndex == imageArray.length){
        currentIndex = 0; //replay slideshow

   /*to stop slideshow add this:
   *     window.clearInterval(slideInt)     
   *     return false;
   */

   }
     var theHTML = '<img src="http://www.domain.com/Pics/Test-' +    
                    imageArray[currentIndex] + '.jpg">';
     document.getElementById("slideshow").innerHTML = theHTML;
     currentIndex +=1;
}

  var imageArray = ['Image1','Image2','Image3'];
  var currentIndex = 0;
  var speed = 5000;
  var slideInt = window.setInterval(slide,speed); //skip a photo every 5000 milis
于 2013-10-06T22:03:34.810 に答える