加載自動幻燈片

我想通過一個單獨的JS文件創建一個帶有onload事件的幻燈片。我試過在網上尋找可能的解決方案，所有這些都需要編碼全部在一個文件中。解決這個問題的最好方法是什麼？加載自動幻燈片

我附上了我的HTML編碼的JS參考。

 <div class="slideshow-container"> 
     <div id="slideshow"> 
      <div class="numbertext">1/5</div> 
      <img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/> 
      <div class="text">Yellowstone National Park<div> 



      <div class="numbertext">2/5</div> 
      <img src="images/SanMural.jpg" width="408px" height="616px"/> 
      <div class="text">San Francisco, CA</div> 



      <div class="numbertext">3/5</div> 
      <img src="images/SanJelly.jpg" height="408px" width="616px"/> 
      <div class="text">San Francisco Aquarium</div> 



      <div class="numbertext">4/5</div> 
      <img src="images/AKGold.jpg" height="408px" width="616px"/> 
      <div class="text">Alaska Yukon</div> 


      <div class="numbertext">5/5</div> 
      <img src="images/SaltLake.jpg" height="408px" width="616px"/> 
      <div class="text">Salt Lake City, UT</div> 
     </div> 
    </div>

來源

2016-11-21 Alec

_「他們都需要編碼全部在一個文件中」_我非常懷疑這是真的。如果代碼位於同一個文件或.js文件中，則沒有區別。如果您向我們展示您的代碼，有人可能會提供幫助。 – Turnip

你的jQuery和/或JavaScript在哪裏？您未能向我們展示您嘗試過的以及您卡在哪裏。 – j08691

我我不確定你在問什麼，因爲你沒有給我們與你合作的JS代碼。我假設你只需要顯示1張圖片，我們應該在加載網頁後開始瀏覽圖片。

我稍微更新你的HTML，並添加JS代碼在下面codepen做到這一點/

http://codepen.io/anon/pen/WopMzb

我更新了你的「幻燈片」的HTML中div的，包裹，所以我們可以很容易地隱藏/顯示「幻燈片」

<div class="slide active"> 
    <div class="numbertext">1/5</div> 
    <img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/> 
    <div class="text">Yellowstone National Park<div> 
</div>

這將只顯示1張「幻燈片」，並會每3秒更換一張幻燈片。

對於將來的問題，最好是創建一個codepen或類似的CSS/JS/HTML，你有問題。如果某人更容易進行調試，則更有可能收到回覆。

來源

2016-11-21 19:42:42 Michael

非常感謝！這就像一個魅力！我很抱歉，我對我的質疑和錯誤陳述非常模糊。我是這個領域的新手，並試圖做一些不是第一性質的事情。 – Alec

-1

您的html結構讓我想起bootstrap的carousel選項。如果你不介意將引導到您的項目可能是值得一試：

Bootstrap carousel

好處是，你不必爲你的幻燈片控制編寫自定義的東西。

來源

2016-11-21 19:37:02

「所有這些都需要編碼全部在一個文件中」。 這是錯誤的。沒有區別，你怎麼包括，例如，Javascript代碼爲您的HTML：

創建單獨的js文件，包括它通過script標籤像這樣（在你的HTML）：
```
<script src="yourFile.js"></script> 
```
或者你包括所有的JavaScript邏輯在你的HTML這樣的：
```
<script> 
    // Your Javascript logic here 
</script> 
```

來源

2016-11-21 19:37:18

加載自動幻燈片

回答

相關問題