加载自动幻灯片

我想通过一个单独的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

加载自动幻灯片

回答

相关问题