如何隐藏所有幻灯片并在 JavaScript 中显示当前幻灯片？

Question

我正在用 Vanilla JavaScript 创建一个滑块。

我有一个基本的基础。

现在我不知道如何隐藏所有其他幻灯片，只显示当前幻灯片。然后在下一张/上一张上，显示下一张幻灯片，并隐藏之前的一张。

我尝试了一些东西，但都没有成功。

这里是代码笔：https://codepen.io/Aurelian/pen/LBGWpd?editors=0010

// Problem: Make the slides slide one after another
// and make the buttons work prev and next to bring prev or next slide

// Solution
// Select all slides
// On next/prev, get the left/right animate from 0 to 100 or from 0 to -100%
// On button press, get the prev/next parent node
// Add active class on the shown 

// Solution Part 2
// Select all slides
// Get the length of the slides
// Display none on every slideItem
// Get the current slide 
// Display block/flex on current slide
// On next, advance the slider index by 1
// On prev, advance the slider index by -1
// Make the slider slide every 3sec with setInterval
// Even listener on slider mousehover, stop the autoslide and add "PAUSED" HTML - add 
// On live the slder, unpause and remove the HTML "PAUSED"



document.addEventListener('DOMContentLoaded', function() {

  var slider = document.querySelector(".slider"),
    sliderList = document.querySelector(".slider__list"),
    sliderItems = document.querySelectorAll(".slider__item"),
    sliderBtnPrev = document.querySelector(".slider__buttons--prev"),
    sliderBtnNext = document.querySelector(".slider__buttons--next"),
    sliderItemsLength = sliderItems.length,
    currentIndex = 0,
    isPaused = false;

  function prevSlide() {
    sliderItems[currentIndex].classList.remove('is-active');
    currentIndex = (currentIndex + sliderItemsLength - 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  function nextSlide() {
    sliderItems[currentIndex].classList.remove('is-active');
    currentIndex = (currentIndex + 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  function advance() {
    isPaused = false;
    if ((isPaused = false) = 1) {
      setInterval(function() {
        nextSlide();
      }, 3000);
    }
  }

  sliderBtnPrev.addEventListener('click', function() {
    prevSlide();
  });

  sliderBtnNext.addEventListener('click', function() {
    nextSlide();
  });

  slider.addEventListener('mouseover', function() {
    isPaused = true;
  });
  slider.addEventListener('mouseout', function() {
    isPaused = false;
  });



  advance();

  // On press next, change slide
  // sliderItems.forEach(function(sliderItem) {
  //    sliderItem.style.display = "none";
  // });

  //    function prevSlide() {
  //       console.log('prev slide');
  //    }

  //    function nextSlide() {
  //       console.log('next slide');


  //       // if (currentIndex) {
  //          // console.log(sliderItems[currentIndex])
  //       // }
  //       // sliderItemsLength.push[1];

  //       // currentIndex + 1;
  //       // console.log(currentIndex < (sliderItemsLength + 1));
  //       // console.log(sliderItems[currentIndex + 1])
  //       // if (sliderItemsLength < -1) {
  //       //    sliderItemsLength++;
  //       // }
  //       // if (currentIndex < (sliderItemsLength + 1)) {
  //       //     sliderItems[currentIndex].classList.add('is-active');
  //       // }
  //       // if (numbers.length > 3) {
  //       //   numbers.length = 3;
  //       // }
  //       // myArray[myArray.length - 1] + 1
  //       if (currentIndex < (sliderItemsLength + 1)) {
  //          sliderItems[currentIndex].classList.add('is-active');
  //          currentIndex++;
  //       } else {
  //          sliderItems.style.display = "none";
  //       }
  //    }



});

* {
  box-sizing: border-box;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider {
  position: relative;
  height: 350px;
  width: 100%;
}

.slider__list {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slider__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
}

.slider__item.is-active {
  display: flex;
}

.slider__item:first-child {
  background-color: orange;
}

.slider__item:nth-child(2) {
  background-color: gold;
}

.slider__item:last-child {
  background-color: green;
}

.slider__title {
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.slider__buttons {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
}

.slider__buttons--prev {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  margin: auto;
  top: 0;
  left: 30px;
}

.slider__buttons--next {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  right: 30px;
}

<div class="container">
  <div class="slider">

    <ul class="slider__list">
      <li class="slider__item is-active">
        <span class="slider__title">1</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">2</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">3</span>
      </li>
    </ul>

    <div class="slider__buttons">
      <span class="slider__buttons--prev"></span>
      <span class="slider__buttons--next"></span>
    </div>

    <!--    <ul class="slider__nav">
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
   </ul> -->

  </div>
</div>

Answer 1

• 你需要默认隐藏所有幻灯片display: none然后定义一个类is-active将display更改为flex
• 从-1开始计数
• 下一张幻灯片的计算公式是：

(currentIndex + 1) % sliderItemsLength

• 上一张幻灯片的计算公式为：

(currentIndex + sliderItemsLength - 1) % sliderItemsLength

document.addEventListener('DOMContentLoaded', function() {

  var sliderList = document.querySelector(".slider__list"),
    sliderItems = document.querySelectorAll(".slider__item"),
    sliderBtnPrev = document.querySelector(".slider__buttons--prev"),
    sliderBtnNext = document.querySelector(".slider__buttons--next"),
    sliderItemsLength = sliderItems.length,
    currentIndex = -1;

  function prevSlide() {
    sliderItems[currentIndex].classList.remove('is-active');
    currentIndex = (currentIndex + sliderItemsLength - 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  function nextSlide() {


    if (currentIndex > 0) sliderItems[currentIndex].classList.remove('is-active');
    else sliderItems[0].classList.remove('is-active');

    currentIndex = (currentIndex + 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  sliderBtnPrev.addEventListener('click', function() {
    prevSlide();
  });

  sliderBtnNext.addEventListener('click', function() {
    nextSlide();
  });

  nextSlide();

});

* {
  box-sizing: border-box;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider {
  position: relative;
  height: 350px;
  width: 100%;
}

.slider__list {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slider__item {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
}

.slider__item.is-active {
  display: flex;
}

.slider__item:first-child {
  background-color: orange;
}

.slider__item:nth-child(2) {
  background-color: red;
}

.slider__item:last-child {
  background-color: green;
}

.slider__title {
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.slider__buttons {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
}

.slider__buttons--prev {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  margin: auto;
  top: 0;
  left: 30px;
}

.slider__buttons--next {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  right: 30px;
}

<div class="container">
  <div class="slider">

    <ul class="slider__list">
      <li class="slider__item">
        <span class="slider__title">1</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">2</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">3</span>
      </li>
    </ul>

    <div class="slider__buttons">
      <span class="slider__buttons--prev"></span>
      <span class="slider__buttons--next"></span>
    </div>

    <!--    <ul class="slider__nav">
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
   </ul> -->

  </div>
</div>