我在轮播中显示图像的功能有一个额外的空白图像

Question

//get the object
let slideshowContainer = document.getElementById('slideshow-container');



//get the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
//create an index
var slideIndex = 0;

function showSlides(n) {
    const slides = document.getElementsByClassName('product');
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }
    if (n < 0) {
        slideIndex = slides.length
    }
    if (n > slides.length) {
        slideIndex = 0
    }
    slides[slideIndex].style.display = 'block';
    slideIndex = n;
}

function incrementSlides(n) {
    showSlides(slideIndex += n)
}

//add event listeners
next.addEventListener('click', function () {
    incrementSlides(1);
})
prev.addEventListener('click', function () {
    incrementSlides(-1);
})

showSlides(slideIndex);

#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in 0.3s;
  transition: all ease-in 0.3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: 0.95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
  height: 1000px;
  margin: auto;
  position: relative;
  background: grey;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

   <!-- Section-one -->
    <section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div id="slideshow-container">
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://i.pinimg.com/originals/5a/e5/8f/5ae58f5036997cfd4636917403c3c951.jpg"
              alt="image1"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt="image2"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://cdn.pixabay.com/photo/2017/02/22/20/02/landscape-2090495_960_720.jpg"
              alt="image3"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <a href="javascript:void(0);" class="prev"></a>
        <a href="javascript:void(0);" class="next"></a>
      </div>
    </section>

我正在尝试构建一个带有图像滑块的页面。 我观看了一些 youtube 视频，我合并了代码并试图让某些东西起作用，但我遇到了一个错误。当我更改下一张或上一张图片时，我得到一个空白页，我不知道为什么。 我将创建一个代码 sn-p 向您展示。我不仅要解决问题，还要解释，拜托！ 干杯！！！

Answer 1

您需要更改您的 2 个“if”语句，因为它们不考虑数组上基于 0 的索引：

if (n < 0) {
        slideIndex = slides.length - 1
    }
if (n > slides.length - 1) {
        slideIndex = 0
 }

Answer 2

这是工作的 jsFiddle，对您的代码进行了一些修复： https://jsfiddle.net/0mrpbv6c/

基本上， 我在您的 a 链接中添加了一些文字，以便能够点击它们

<a href="javascript:void(0);" class="prev">PREV</a>
<a href="javascript:void(0);" class="next">NEXT</a>

我修复了showSlides 中的 2 个if 条件，以按预期继续轮播。在这里，您忘记了- 1，因为您的幻灯片从 0 开始

if (n < 0) {
  slideIndex = slides.length - 1;
}
if (n > slides.length - 1) {
  slideIndex = 0;
}

我删除了以下指令，因为您不想从 n 更新 slideIndex，因为在 incrementSlides 中调用 showSlides 时它已经被更新，并且它还会覆盖您可能从 2 获得的值 if .

slideIndex = n;

Answer 3

我已尝试修复您的代码。

function showSlides(n) {
  console.log(n)
    const slides = document.getElementsByClassName('product');
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }
      slideIndex = n; // edited
    if (n < 0) {
        slideIndex = slides.length
    }
    if (n >= slides.length) {  // edited
        slideIndex = 0
    }
    slides[slideIndex].style.display = 'block';
}