轮播不显示图片

时间:2018-04-23 01:53:47

标签: javascript jquery html

我有一个旋转木马,由于某种原因在加载网页时没有显示图像。我在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>

1 个答案:

答案 0 :(得分:1)

尝试在HTML之后加载JS。

查看差异:

  1. https://jsfiddle.net/vy9uwxhk/ - 查看控制台的错误。由于没有找到合适的HTML,代码执行会停止并导致轮播无法正常工作。
  2. https://jsfiddle.net/6k92zvze/ - 此处<script>在HTML之后加载,当它找到HTML时,执行成功并且轮播工作正常。
  3. 希望这会有所帮助。这里还有info on where to include your script tags