javascript - 轮播不显示图像

Question

我有一个轮播，由于某种原因在加载网页时不显示图像。我在 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>

Answer 1

只需尝试在 HTML 之后加载 JS。

看看这里的区别:

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

希望这对您有所帮助。更多info on where to include your script tags .