Jquery Slider 箭头未出现

Question

我正在做 Jquery Slider，我的上一张图片有问题。 所有图像都出现了箭头，但不是最后一个消失了，我不明白为什么，有人可以帮助我吗？

这是我的代码笔： https://codepen.io/Softee/pen/WNZpXGa

这是我的代码：

 var slideIndex = 1; showImage(slideIndex); function plusIndex(n) { showImage(slideIndex += n); } function currentSlide(n) { showImage(slideIndex = n); } function showImage(n) { var slide = document.getElementsByClassName("slides"); var dots = document.getElementsByClassName("dots"); if (n > slide.length) { slideIndex = 1 }; if (n < 1) { slideIndex = slide.length }; for (var i = 0; i < slide.length; i++) { slide[i].style.display = "none"; }; slide[slideIndex - 1].style.display = "block"; for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("active", ""); }; } autoSlide(); function autoSlide(){ var i; var x = document.getElementsByClassName("slides"); for(i=0;i<x.length;i++); { x[i].style.display = "none"; } if(index > x.length){ index = 1} x[index-1].style.display = "block"; index++; setTimeout(autoSlide,2000); }

 body { margin: 0; font-family: verdana, sans-serif; }.slideshow-container { width: 800px; position: relative; margin: auto; }.slides { display: none; }.slideshow-container img { width: 800px; }.number { position: absolute; padding: 8px 12px; color: #f2f2f2; }.text { text-align: center; font-size: 18px; position: absolute; width: 100%; padding: 8px 16px; bottom: 55px; color: #f2f2f2; font-weight: bold; }.prev, .next { position: absolute; margin-top: -250px; color: #f2f2f2; font-weight: bold; padding: 10px 10px; font-size: 18px; border-radius: 0 3px 3px 0; cursor: pointer; }.next { border-radius: 3px 0 0 3px; right: 0; }.prev:hover, .next:hover { background: rgba(0, 0, 0, 0.8); }.dots { width: 10px; height: 10px; display: inline-block; background: grey; padding: 5px; border-radius: 50%; cursor: pointer; }.fade { animation-name: fade; animation-duration: 0.5s; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } }.active, .dots:hover { background: #333; }

 <:--Container Slide Show--> <div class="slideshow-container"> <div class="slides fade"> <div class="number">1 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Taj Mahal</div> </div> <div class="slideshow-container"> <div class="slides"> <div class="number">2 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Chichen Itza</div> </div> <div class="slideshow-container"> <div class="slides"> <div class="number">3 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Colisée</div> </div> <div class="slideshow-container"> <div class="slides"> <div class="number">4 / 4</div> <div><img src="https.//www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V:jpg"></div> <div class="text">Le Machu Picchu</div> </div> <a class="prev" onclick="plusIndex(-1)">&#10094</a> <a class="next" onclick="plusIndex(+1)">&#10095</a> </div> <br/> <div style="text-align:center"> <span class="dots" onclick="currentSlide(1)"></span> <span class="dots" onclick="currentSlide(2)"></span> <span class="dots" onclick="currentSlide(3)"></span> <span class="dots" onclick="currentSlide(4)"></span> </div>

.....................................

Answer 1

可以通过编辑 CSS 来修复此问题。 所以而不是：

.prev, .next {
  position: absolute;
  top: -250px;

做：

.prev,.next {
  position: absolute;
  margin-top: -250px;

当您到达最后一张幻灯片时，这可以防止箭头在.slides div 上方移动。

对于自动滑动功能，不需要所有复杂的代码。 只需在.next div 上触发对 click 事件的调用。 另外，使用setInterval()而不是setTimeout 。 所以替换整个定义并使用以下代码调用autoslide() function：

setInterval(() => {
      document.querySelector(".next").click()
        }, 2000);

查看https://codepen.io/cedric-ipkiss/pen/BamzBmz上的更新笔