javascript - 使用带有可点击箭头的 Vanilla JS 创建文本 slider

Question

我想我需要在某处使用循环，但我不确定如何将其转换为我的代码，所以如果有人能帮助我，我将不胜感激。

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

我还意识到我可能应该使用某种与我拥有的文本 block 数量相关的循环，但我还无法将其转换为我的代码，因为我对此仍然很陌生。

我想我可以为每个文本 block 创建变量，然后将它们添加到一个数组中(甚至不确定是否允许这样做)。之后，我将计算数组的 .length 以使箭头点击。 如果有人可以帮助我，我将不胜感激!如果仅以常规 JS 给出答案，我将不胜感激。

这是代码笔: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

这是实现 slider 的另一种方式。定义一个“当前索引”，当您在幻灯片之间单击时会更新该索引。由于您使用的是一组幻灯片，我认为这会更合适一些。

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>