轮播不显示图片 [英] Carousel not displaying image

问题描述

我有一个轮播，由于某种原因，该轮播在加载网页时不显示图像.我在Dream Weaver中工作，由于某种原因，JS功能仅在单击箭头按钮之一后才会启动.我觉得我需要强制给函数一个图像，以便在加载页面时显示该图像，但是我不确定如何执行此操作.谢谢您的帮助！

I have a carousel that is not displaying the images upon loading the webpage for some reason. I am working in dream weaver and for some reason the JS function only kicks in after clicking on one of the arrow buttons. I feel like I need to force feed the function one image in order for it show upon loading the page but I am not sure how to do this. Thanks for the help!

这是HTML(我的head标签中有JS功能):

Here is the HTML (I have the JS fucntion in the head tags):

    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>

推荐答案

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

Just try loading your JS after the HTML.

在这里查看区别:

1. https://jsfiddle.net/vy9uwxhk/-在控制台上查看错误.由于找不到合适的HTML，因此代码执行停止，并导致轮播无法正常工作.
2. https://jsfiddle.net/6k92zvze/-此处<script>是在HTML及其找到的HTML，表示执行成功并且轮播正常工作.

1. https://jsfiddle.net/vy9uwxhk/ - look at the console for the error. As it's not finding the appropriate HTML, the code execution stops and results in non-working of the carousel.
2. https://jsfiddle.net/6k92zvze/ - here the <script> is loaded after the HTML and as it finds the HTML, the execution is successful and the carousel works fine.

希望这会有所帮助. 有关在何处包含脚本标签的信息.

Hope this helps. Here's more info on where to include your script tags.

这篇关于轮播不显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！