如何通過外部js文件運行javascript圖像幻燈片？

Question

我有我的網站上答這個滑塊工作正常...它只是和圖像轉換器，其在幻燈片放映改變圖像和它的代碼寫在main.html中的文件是這個

<img src="images/1.jpg" name="slide" width="100%" height="368" /> 
<script> 
<!-- 
    var image1=new Image() 
    image1.src="images/1.jpg" 
    var image2=new Image() 
    image2.src="images/4.jpg" 
    var image3=new Image() 
    image3.src="images/3.jpg" 

    //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<3) 
      step++ 
     else 
      step=1 
     //call function "slideit()" every 2.5 seconds 
     setTimeout("slideit()",2500) 
    } 
    slideit() 
//--> 
</script> 

現在它的工作絕對好..所有我想要的是，我有一個文件名page1.js我想把我的JavaScript代碼在該文件，而不是我的main.html文件..請告訴我如何把這個JavaScript代碼該page1.js文件，並調用它，使圖像幻燈片放映將工作正常，因爲它正在工作，現在在同一個文件中的JavaScript代碼。

Answer 1

所有你需要做的是包括你的JS文件或者在你的頁腳或hea DER：

<script src="js.js"></script> 

，然後在JS文件西港島線包含：

 var image1=new Image() 
    image1.src="images/1.jpg" 
    var image2=new Image() 
    image2.src="images/4.jpg" 
    var image3=new Image() 
    image3.src="images/3.jpg" 

    //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<3) 
    step++ 
    else 
    step=1 
    //call function "slideit()" every 2.5 seconds 
    setTimeout("slideit()",2500) 
    } 
    slideit() 

您需要更改的唯一事情是對圖像本身的路徑，他們可以是相對於JS文件或絕對。

Answer 2

把你的javascript從上面到一個名爲my-slides.js文件，然後用這個代替腳本標籤在當前的HTML文件：

<script type="text/javascript" src="my-slides.js"></script> 

確保my-slides.js是在同一文件夾作爲HTML文件，否則相應地更改路徑。

---

FWIW，雖然你有沒有在你的問題問的這個問題，我想我也應該提到以下幾點：

• 考慮使用大括號中if和else塊定義代碼塊，甚至當它是一個單一的行。真正提高代碼的可讀性
• 此行：document.images.slide.src=eval("image"+step+".src")使用eval，你應該避免它。我不確定通過用eval包裝字符串連接完成了什麼。我會將Image存儲在一個數組中，並通過索引訪問它。
• 而不是在函數內重複發生setTimeout，請考慮在函數的外部使用setInterval。

---

根據要求。

這是my-slides.js應該包含的內容。

var numImages = 3; 
    var images = []; 
    for (var i = 0; i < numImages; ++i) { 
     var image = new Image(); 
     image.src = 'images/' + (i + 1) + '.jpg'; 
     images.push(image); 
    } 

    var step = 0; 
    function slideit() { 
     if (! document.images) { 
      return; 
     } 
     document.images.slide.src = images[step].src; 
     step = (step + 1) % numImages; 
    } 
    setInterval(slideit, 2500);