Question

我有3张图片，我希望使用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

请检查您提供的图像URL。对我有用

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

滑块显示单个图像

1 个答案: