javascript - slider 显示单个图像

Question

我有三张图片，我想用 javascript 放映幻灯片，问题是它只显示第一张图片，其他两张图片为空白。可能是什么问题？

我在互联网上搜索过类似的解决方案，但它们不适用于我的情况。

<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
    <div class="item-slide slide1">
        <img src="images/banners/slide2.jpg">
    </div>
    <div class="item-slide slide1">
        <img src="images/banners/slide1.jpg">
    </div>
    <div class="item-slide slide1">
        <img src="images/banners/slide3.jpg">
    </div>
</div>
<!-- ============== main slidesow .end // ============= -->
<!-- ============== slider auto scroll js ============= -->

<script>

      let sliderImages = document.querySelectorAll('.item-slide'),
      current=0;
     //clear all images
      function reset(){
        for(let i = 0; i < sliderImages.length; i++){
          sliderImages[i].style.display = 'none';
        }
      }
      //init slider
      function startSlide(){
         reset(); 
        sliderImages[current].style.display = 'block';
        if(current < sliderImages.length - 1){
          current++;
          //document.write(current)
        }
        else{
              current = 0;
              //document.write(current)
           }
           //document.write(sliderImages.length);
                 setTimeout("startSlide()",2000);

      }
startSlide();       
   </script>

Answer 1

请检查您提供的图片网址。它对我有用

<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
    <div class="item-slide slide1">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
    </div>
    <div class="item-slide slide1">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png">
    </div>
    <div class="item-slide slide1">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png">
    </div>
</div>
<!-- ============== main slidesow .end // ============= -->
<!-- ============== slider auto scroll js ============= -->

<script>

      let sliderImages = document.querySelectorAll('.item-slide'),
      current=0;
     //clear all images
      function reset(){
        for(let i = 0; i < sliderImages.length; i++){
          sliderImages[i].style.display = 'none';
        }
      }
      //init slider
      function startSlide(){
         reset(); 
        sliderImages[current].style.display = 'block';
        if(current < sliderImages.length - 1){
          current++;
          //document.write(current)
        }
        else{
              current = 0;
              //document.write(current)
           }
           //document.write(sliderImages.length);
                 setTimeout("startSlide()",2000);

      }
startSlide();       
   </script>