javascript - 为什么图像不会立即弹出到我的图像轮播中？

Question

我正在为一家关于飞机的虚构公司制作图像轮播。稍后我会做更多的样式，所以请原谅代码的极端乏味。我有一些从互联网上提取的图片。这真的让我感到困惑，因为我不知道我做错了什么。感谢您花时间阅读我的帖子，这真的意义重大。为什么不弹出图像？这是我的代码:

HTML:

            <div class="bulkOfPage">
                <!-- Image Carousel Goes Here -->
                <!-- Work More on This -->
                <div class="slideshow-container">
                  <div class="mySlides fade">
                    <div class="numbertext">1 / 3</div>
                    <img src="img/airplanes-work-1.jpg" style="width:100%">
                    <div class="text">Our fleet is the most updated in the business, with our planes being decked out in the latest equipment</div>
                  </div>

                  <div class="mySlides fade">
                    <div class="numbertext">2 / 3</div>
                    <img src="img/landing1015-airplane.jpg" style="width:100%">
                    <div class="text">We have the most trained pilots in the industry, and this gives the smoothest landings you will find.</div>
                  </div>

                  <div class="mySlides fade">
                    <div class="numbertext">3 / 3</div>
                    <img src="img/download.jpeg" style="width:100%">
                    <div class="text">We have landing rights at almost all of the major airports around the world.</div>
                  </div>

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

                <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>

还有我的 CSS:

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

最后是 JavaScript:

$(document).ready(function(){
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none"; 
        }
        slideIndex++;
        if (slideIndex> slides.length) {slideIndex = 1} 
        slides[slideIndex-1].style.display = "block"; 
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
});

非常感谢您阅读我的文章，这对我来说意义重大。谢谢!祝你有美好的一天!

Answer 1

这应该有效。我为您的下一个/上一个按钮和点按钮添加了功能。

请注意，由于作用域的原因，无法使用诸如 div onclick="plusSlides(1)"之类的触发器来访问 document.ready 中发生的事情。因此，要么在 document.ready 之外定义函数，要么使用 jQuery 方式代替 onclick=""，例如:$('.dot').click

就我个人而言，我不喜欢您使用基于 1 的索引。我认为这增加了困惑；它添加了 -1, +1 ,... 我建议您将来使用基于 0 的索引。不要尝试让第一个元素的索引为 1。

<body>
<div class="bulkOfPage">
    <!-- Image Carousel Goes Here -->
    <!-- Work More on This -->
    <div class="slideshow-container">
        <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="https://www.w3schools.com/css/img_fjords.jpg" style="width:100%">
            <div class="text">Our fleet is the most updated in the business, with our planes being decked out in the latest equipment</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="https://www.w3schools.com/css/img_forest.jpg" style="width:100%">
            <div class="text">We have the most trained pilots in the industry, and this gives the smoothest landings you will find.</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="https://www.w3schools.com/css/img_lights.jpg" style="width:100%">
            <div class="text">We have landing rights at almost all of the major airports around the world.</div>
        </div>

        <a class="prev">&#10094;</a>
        <a class="next">&#10095;</a>
    </div>
    <br>
    <div style="text-align:center">
        <span class="dot" data-index="1"></span>
        <span class="dot" data-index="2"></span>
        <span class="dot" data-index="3"></span>
    </div>
    <style>
        * {
            box-sizing: border-box
        }
        /* Slideshow container */

        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        .mySlides {
            display: none;
        }
        /* Next & previous buttons */

        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
        }
        /* Position the "next button" to the right */

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        /* On hover, add a black background color with a little bit see-through */

        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        /* Caption text */

        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }
        /* Number text (1/3 etc) */

        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }
        /* The dots/bullets/indicators */

        .dot {
            cursor: pointer;
            height: 13px;
            width: 13px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active,
        .dot:hover {
            background-color: #717171;
        }
        /* Fading animation */

        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var timer;
            var slideIndex = 0;
            showSlides();
            function showSlides() {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                slideIndex++;
                if (slideIndex > slides.length) {
                    slideIndex = 1
                }
                slides[slideIndex - 1].style.display = "block";
                timer = setTimeout(showSlides, 4000); // Change image every 4 seconds
            }

            // click on dot.  Takes you straight to that picture
            $('.dot').click(function() {
               slideIndex = $(this).data('index') -1;  // this reads the value of <... data-index="..." >
               clearTimeout(timer);
               showSlides(); 
            })
            // next / prev buttons
            function next() {
                clearTimeout(timer);
                var slides = document.getElementsByClassName("mySlides");
                slideIndex++;
                if (slideIndex > slides.length) {
                    slideIndex = 1
                }
                showSlides();
            }
            $('.next').click(function() {
               next();
            })
            function prev() {
                clearTimeout(timer);
                var slides = document.getElementsByClassName("mySlides");
                slideIndex -=2;
                if (slideIndex < 0) {
                    slideIndex = slides.length -1;
                }
                showSlides();
            }
            $('.prev').click(function() {
               prev();
            })
        });

    </script>
</body>