如何重新播放幻燈片？

Question

我有以下代碼：

<script type="text/javascript">
var image1=new Image()
image1.src="images/natandadam.jpg"

var image2=new Image()
image2.src="images/gardaa.jpg"

var image3=new Image()
image3.src="images/marmaris.jpg"

var image4=new Image()
image4.src="images/gardab.jpg"

var image5=new Image()
image5.src="images/engagement.jpg"

var image6=new Image()
image6.src="images/gardac.jpg"

var image7=new Image()
image7.src="images/natandadamlake.jpg"

//-->
</script>

<script>
<!--
//variable that will increment through the images
var step=1

function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images) {
        return;
    }
    document.images.slide.src=eval("image"+step+".src");

    if (step<7) {
        step++;
    } else {
        step=1;
    }

    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500);
}

slideit();
//-->
</script>

...這叫做：

<img style="border:6px double #545565;"  src="gardaa.jpg" name="slide" width=600 height=400>

我希望它繼續跳過圖像，但是它停在最后一張圖像上。 當它只有三個圖像時，它曾經重復過； 現在，我添加了更多停止功能。

我要做什么以使它們重復？

Answer 1

您可以相當簡化腳本：

<script type="text/javascript">  
var images ="natandadam.jpg,gardaa.jpg,marmaris.jpg,gardab.jpg,engagement.jpg,gardac.jpg,natandadamlake.jpg".split(",")
var step=1

function slideit(){
   document.images.slide.src="images/" + images[step]
   step++
   if(step>images.length) {
       step = 1
   }
   setTimeout(function(){slideit()},2500);
}

slideit();

</script>

一些提示：

1-您不需要使用<!--和//-->來隱藏腳本。 唯一需要這樣做的瀏覽器於90年代死亡。

2-不要使用eval() ，這是邪惡的。

3-由於圖像現在位於陣列中，因此您可以根據需要檢查添加或刪除許多圖像，而不必使用if (step<7) 。 該代碼僅檢查數組的長度。

4-在setTimeout中使用所謂的匿名函數代替引用代碼。 引用代碼在內部使用eval( ）。