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视频，我合并了代码并尝试使某些功能正常工作，但遇到了错误。当我更改下一张或上一张图片时，我会得到空白页，但我不知道为什么。我将创建一个代码片段向您展示。我不仅要解决问题，也不要解释！干杯！！！

Answer 1

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

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

Answer 2

我已尝试修复您的代码。

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';
}

Answer 3

这是有效的jsFiddle，其中包含一些对您的代码的修复： https://jsfiddle.net/0mrpbv6c/

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

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

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

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

我删除了以下指令，因为您不想从n更新slideIndex，因为在showSlides中调用incrementSlides时已经对其进行了更新，并且它覆盖了您的值可能来自2个if。

slideIndex = n;

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

3 个答案: