使用带有可点击箭头的香草JS创建文本滑块

Question

我认为我需要在某个地方使用循环，但是我不确定如何将其转换为我的代码，因此，如果有人可以帮助我，我将不胜感激。

我要显示3个文本块，同时使用两个箭头在文本之间进行切换。我认为应该对当前未显示的2个文本块使用“ display：none”。

我还意识到，我可能应该使用与我拥有的文本块数量有关的某种循环，但是由于我还很陌生，所以我无法将其转换为代码。

>

我可以为每个文本块创建变量，然后将它们添加到数组中（甚至不确定是否允许）。之后，我将评估数组的.length以使箭头单击。 如果有人可以帮助我，我将不胜感激！如果仅在常规JS中给出答案，我也将不胜感激。

这是codepen：https://codepen.io/ItzaMi/pen/ZPMXYw

var scrollArrowRight = document.getElementById("scroll-arrow-right");
var scrollArrowLeft = document.getElementById("scroll-arrow-left");

var par1 = document.getElementById("p-1");
var par2 = document.getElementById("p-2");
var par3 = document.getElementById("p-3");

var slider = [par1, par2, par3];

scrollArrowRight.onclick = function() {
  par2.style.display = "block";
  par1.style.display = "none";
}

scrollArrowLeft.onclick = function() {
  par2.style.display = "none";
  par3.style.display = "block";
}

#scroll-join {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: row;
}

.scroll-arrow {
  margin: 0 0.6em;
  font-size: 1.4em;
}

#p-2 {
  display: none;
}

#p-3 {
  display: none;
}

<div id="scroll-join">
  <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left"></i>
  <p class="join-p" id="p-1">WLorem ipsum dolor sit amet.</p>
  <p class="join-p" id="p-2">Lorem ipsum dolor sit amet</p>
  <p class="join-p" id="p-3">WLorem ipsum dolor sit amet.</p>
  <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right"></i>
</div>

Answer 1

您可以通过为当前活动元素设置active类，并在单击箭头时基于哪个元素为active来显示下一个/上一个元素，来实现文本滑块。我用这个想法写了一个可行的例子：

var scrollArrowRight = document.getElementById("scroll-arrow-right");
var scrollArrowLeft = document.getElementById("scroll-arrow-left");

scrollArrowRight.onclick = function() {
  // get current active element
  var active = document.querySelector(".active");
  // add active class to next sibling      
  active.nextElementSibling.classList.add("active");
  // get all active elements
  var allActive = document.querySelectorAll(".active");
  // remove active class from first element
  allActive[0].classList.remove("active");
}

scrollArrowLeft.onclick = function() { 
  // get current active element
  var active = document.querySelector(".active");
  // add active class to previous sibling
  active.previousElementSibling.classList.add("active");
  // get all active elements
  var allActive = document.querySelectorAll(".active");
  // remove active class from second element
  allActive[1].classList.remove("active");
}

#scroll-join {
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
   flex-direction: row;
}

.scroll-arrow {
  margin: 0 0.6em;
  font-size: 1.4em;
}

.join-p {
  display: none; 
 }

.active {
  display: block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

<div id="scroll-join">
    <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left"></i>
    <div>
      <p class="join-p active">1 Lorem ipsum dolor amet.</p>
      <p class="join-p">2 Lorem ipsum dolor sit amet</p>
      <p class="join-p">3 Lorem ipsum dolor sit amet</p>
    </div>
    <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right"></i>
</div>

希望能帮助您入门！

Answer 2

这是实现滑块的另一种方法。定义一个“当前索引”，当您在幻灯片之间单击时会更新。由于您正在使用一系列幻灯片，我认为这会更合适。

var scrollArrowRight = document.getElementById("scroll-arrow-right");
var scrollArrowLeft = document.getElementById("scroll-arrow-left");

var par1 = document.getElementById("p-1");
var par2 = document.getElementById("p-2");
var par3 = document.getElementById("p-3");

var slider = [par1, par2, par3];
var currentIndex = -1;

//On load, show the first slide
loadPage(0);

function loadPage(i) {
  //Check if index is valid
  if (slider[i]) {
    slider[i].removeAttribute('hidden');
  } else {
    return;
  }

  //Hide previous slide
  if (slider[currentIndex]) {
    slider[currentIndex].setAttribute('hidden', '');
  }

  currentIndex = i;
}

scrollArrowRight.onclick = function() {
  loadPage(currentIndex + 1);
}

scrollArrowLeft.onclick = function() {
  loadPage(currentIndex - 1);
}

#scroll-join {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: row;
}

.scroll-arrow {
  cursor: pointer;
  margin: 0 0.6em;
  font-size: 1.4em;
}

<div id="scroll-join">
  <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left">←</i>
  <p class="join-p" id="p-1" hidden>WLorem ipsum dolor sit amet.</p>
  <p class="join-p" id="p-2" hidden>Lorem ipsum dolor sit amet</p>
  <p class="join-p" id="p-3" hidden>WLorem ipsum dolor sit amet.</p>
  <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right">→</i>
</div>

Answer 3

const [arrowLeft, arrowRight] = document.querySelectorAll(".container .arrow");

const textBoxes = document.querySelectorAll(".text-box");

textBoxes.howFarTranslated = -100;

function handleArrowClick() {
  if (this === arrowLeft && textBoxes.howFarTranslated > -200) {
    textBoxes.howFarTranslated -= 100;
  } else if (this === arrowRight && textBoxes.howFarTranslated < 0) {
    textBoxes.howFarTranslated += 100;
  }

  arrowLeft.disabled = textBoxes.howFarTranslated === -200;
  arrowRight.disabled = textBoxes.howFarTranslated === 0;

  textBoxes.forEach(
    textBox =>
    (textBox.style.transform = `translateX(${textBoxes.howFarTranslated}%)`)
  );
}

[arrowLeft, arrowRight].forEach(arrow =>
  arrow.addEventListener("click", handleArrowClick)
);

body {
  margin: 0;
  padding-top: 64px;
}

body,
body * {
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 50%;
  height: 54px;
  min-width: 320px;
  margin: auto;
}

.container .arrow {
  flex: 1;
  min-width: 64px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
}

.container .arrow:hover:not([disabled]) {
  box-shadow: 0 2px 8px #666;
}

.container .arrow:active {
  transform: scale(0.95);
}

.container .arrow[disabled] {
  opacity: 0.25;
  cursor: initial;
}

.container .display-box {
  flex: 5;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.container .display-box .text-box {
  position: relative;
  z-index: -1;
  display: inline-flex;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: translateX(-100%);
  transition: transform 333ms linear;
}

.container .display-box .text-box p {
  margin: auto;
  font-size: 24px;
}

<div class="container">
  <button class="arrow left-arrow"><</button>
  <div class="display-box">
    <div class="text-box text-0">
      <p>Text 0 text 0 text 0 text 0</p>
    </div>
    <div class="text-box text-1">
      <p>Text 1 text 1 text 1 text 1</p>
    </div>
    <div class="text-box text-2">
      <p>Text 2 text 2 text 2 text 2</p>
    </div>
  </div>
  <button class="arrow right-arrow">></button>
</div>