轮播索引

Question

所以我正在做一个轮播，我遇到了我无法弄清楚的问题。

在第一次迭代中，它确实创造了奇迹，但遗憾的是，outindexing 没有得到处理。 我认为这很容易：事实证明并非如此。

当我尝试向它添加逻辑时，我得到 undefined 代替轮播。有人知道我搞砸的地方吗？ 提前谢谢你。

有效但没有索引保护。

const $leftButton = document.querySelector("#LEFT_BUTTON");
const $rightButton = document.querySelector("#RIGHT_BUTTON");

const CarouselList = [
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="1"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="2"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="3"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="4"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="5"></a>',
];

let CarouselListCurrentPosition = 0;

$leftButton.addEventListener("click", leftClick);

function leftClick() {
  document.querySelector("#CAROUSEL_ELEMENTS").innerHTML =
    CarouselList[CarouselListCurrentPosition - 1];
  CarouselListCurrentPosition = CarouselListCurrentPosition - 1;
}

$rightButton.addEventListener("click", rightClick);

function rightClick() {
  document.querySelector("#CAROUSEL_ELEMENTS").innerHTML =
    CarouselList[CarouselListCurrentPosition + 1];
  CarouselListCurrentPosition = CarouselListCurrentPosition + 1;
}

据我所知，我的问题应该有效，但没有。

function leftClick() {
  if (CarouselListCurrentPosition === 0) {
    return;
  } else {
    document.querySelector("#CAROUSEL_ELEMENTS").innerHTML =
      CarouselList[CarouselListCurrentPosition - 1];
    CarouselListCurrentPosition = CarouselListCurrentPosition - 1;
  }
}

$rightButton.addEventListener("click", rightClick);

function rightClick() {
  if (CarouselListCurrentPosition === 4) {
    return;
  } else {
    document.querySelector("#CAROUSEL_ELEMENTS").innerHTML =
      CarouselList[CarouselListCurrentPosition - 1];
    CarouselListCurrentPosition = CarouselListCurrentPosition - 1;
  }
}

Answer 1

我不确定这是否有效，你没有提供任何 HTML 代码来测试。但是你能试试这个代码吗？如果它有效？

const $leftButton = document.querySelector('#LEFT_BUTTON'); 
const $rightButton = document.querySelector('#RIGHT_BUTTON');

const carouselList = [
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="1"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="2"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="3"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="4"></a>',
  '<a href="http://"><img src="Images/Vector_2677.jpg" alt="5"></a>'
];

let carouselListCurrentPosition = 0;

$leftButton.addEventListener('click', leftClick);

function leftClick() {
  if (carouselListCurrentPosition > 0) {
    carouselListCurrentPosition--;
  }
  document.querySelector('#CAROUSEL_ELEMENTS').innerHTML = carouselList[carouselListCurrentPosition];
}

$rightButton.addEventListener('click', rightClick);

function rightClick() {
  if (carouselListCurrentPosition < carouselList.length - 1) {
    carouselListCurrentPosition++;
  }
  document.querySelector('#CAROUSEL_ELEMENTS').innerHTML = carouselList[carouselListCurrentPosition];
}