香草Javascript滑块无法正常工作

1 回答

• 0

  你用 slides[ ].className = 'bg'; 覆盖 unactive 以下几行（与 transport 相同），因此它永远不会被应用 .

  我还必须更改一些z-index值并删除一些东西以使其工作 . （参见代码中的注释）

  var slides = document.getElementsByClassName('bg');
  
  var i = 0;
  
  // When page loads show first background
  (function() {
      slides[i].className += ' active';
  
      i++;
  })();
  
  function changeSlide() {
      // Slide previous slide to the left of the screen
      if(i === 0) {
          slides[slides.length-1].className = 'bg unactive';//Changed 2 to slides.length-1 to avoid hardcoding values
      }
      else {
          slides[i - 1].className = 'bg unactive';
      }
  
      // Slide the current slide in from the right of the screen
      slides[i].className = 'bg active';// removed += to override transport
  
      // Make the slide go back to the right of the screen
      
      // prepare NEXT slide
      if(i === slides.length-1) {
          slides[0].className = 'bg transport';
  
          //slides[2].className = 'bg';    // dont override transport
      }
      else {
          slides[i + 1].className = 'bg transport';
  
          //slides[i - 1].className = 'bg';    // dont override transport
      }
  
      i++
  
      if(i === slides.length) {
          i = 0;
      }
  }
  
  setInterval(changeSlide, 2000);
  

  * {
      margin: 0;
      padding: 0;
  }
  
  html, body, .bg {
      width: 100%;
      height: 100%;
  }
  
  .bg {
      position: absolute;
      left: 100%;
      background-color: tan;
      -webkit-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      transition: all 0.5s linear;
  }
  
  /* The background that is shown */
  .active {
      position: absolute;
      left: 0;
  }
  
  /* Make the background go to the left of the screen */
  .unactive {
      position: absolute;
      left: -100%;  
      z-index: -1; /*added*/
  }
  
  /* Hide the background and make it go back to the right of the screen */
  .transport {
      /*display: none;*/
      position: absolute;
      left: 100%;
      z-index: -2; /*changed to -2*/
  }
  

  <!-- background 1 -->
  <div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">  
  </div>
  
  <!-- background 2 -->
  <div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">  
  </div>
  
  <!-- background 3 -->
  <div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>
  

  回复于 2024-05-06T00:12:21+08:00