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上的更新筆