轮播不显示图像答案

【问题标题】：Carousel not displaying image轮播不显示图像
【发布时间】：2018-04-23 14:27:32
【问题描述】：

我有一个轮播，由于某种原因在加载网页时没有显示图像。我在 Dream weaver 中工作，出于某种原因，JS 功能仅在单击其中一个箭头按钮后才会启动。我觉得我需要强制为函数提供一张图像，以便它在加载页面时显示，但我不知道该怎么做。谢谢您的帮助！

这是 HTML（我在 head 标签中有 JS 功能）：

    var slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
    showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
    showSlides(slideIndex = n);
    }

    function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; 
    }
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active";
    }

    <script src="testcar.js"></script>
    <section class="carousel">
	<div class="slideshow-container">
    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://www.healthypawspetinsurance.com/Images/V3/DogAndPuppyInsurance/Dog_CTA_Desktop_HeroImage.jpg" style="width:100%">
    <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" style="width:100%">
    <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://www.what-dog.net/Images/faces2/scroll001.jpg" style="width:80%">
    <div class="text">Caption Three</div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>

    <!-- The dots/circles -->
    <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span> 
    </div>
    </section>

【问题讨论】：

不要重新发明轮子，使用插件plugins.jquery.com/tag/slideshow
@user2182349 不幸的是，这是学校作业的一部分。通常我的教授都是插件，但这次他不想看到我们网站的任何东西......在我被蜂拥而至之前，这只是我网站的一小部分，我被困在
如果你的教授让你使用 Dreamweaver，请告诉他它已经严重过时了

标签： javascript jquery html

【解决方案1】：

试着在 HTML 之后加载你的 JS。

在这里查看不同之处：

https://jsfiddle.net/vy9uwxhk/ - 查看控制台中的错误。由于找不到合适的 HTML，代码执行停止并导致轮播无法正常工作。
https://jsfiddle.net/6k92zvze/ - 这里 <script> 在 HTML 之后加载，当它找到 HTML 时，执行成功并且轮播工作正常。

希望这会有所帮助。这里有更多info on where to include your script tags。

【讨论】：