Question

我正在尝试通过单独的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>

Answer 1

“所有这些都要求编码全部在一个文件中”。 那是假的。没有区别，例如，您如何包含HTML的Javascript代码：

创建单独的js文件并通过script标记包含它（在您的HTML中）：
```
<script src="yourFile.js"></script>
```
或者您在HTML中包含所有Javascript逻辑，如下所示：
```
<script>
    // Your Javascript logic here
</script>
```

Answer 2

我不确定你在问什么，因为你没有给我们你正在使用的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秒更改一张幻灯片。

对于将来的问题，最好使用您遇到问题的CSS / JS / HTML创建一个codepen或类似的东西。如果某人更容易调试，您更有可能收到回复。

Answer 3

你的html结构让我想起了bootstrap的轮播选项。如果你不介意在你的项目中添加bootstrap，那么值得一看：

Bootstrap carousel

额外奖励是您不必为幻灯片控件编写任何自定义内容。

加载时自动幻灯片放映

3 个答案: