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 上的点击事件的调用。另外，使用setInterval() 而不是setTimeout。所以替换整个定义并用以下代码调用autoslide()函数：

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

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