javascript - 滚动浏览一系列图像，

Question

我在做一个图片库遇到了这个问题，当我向右滚动几次然后向左滚动时，最后一张图片显示两次，并且当前图片编号[指示器]与索引不匹配数组中的元素，我在哪里搞砸了？对于为什么会发生这种情况的任何解释也将不胜感激。

let names = ["imageone.jpg", "imagetwo.jpg", "imagethree.jpg", "imagefour.jpg", "imagefive.jpg", "imagesix.jpg", "imageseven.jpg", "imageeight.jpg", "imagenine.jpg"];

let imageContainer = document.querySelector("#screenShotGallery img");
let indicator = document.querySelector("#indicator");
let left = document.querySelector("#left");
let right = document.querySelector("#right");
let current = 0;

function rightScroll() {
  console.log(names[current++], current)
  indicator.textContent = current;
  if (current >= names.length) {
    current = 0
  }

}

right.addEventListener("click", rightScroll);

function leftScroll() {
  // console.log(names[current--],current) this line produces even worse results
  console.log(names[current = current - 1], current)
  indicator.textContent = current;

  if (current <= 0) {
    current = names.length - 1;
    indicator.textContent = current;
  }

}

left.addEventListener("click", leftScroll);

.screenShots {
  padding-bottom: 30px;
}

#screenShotsIntro {
  text-align: center;
}

#screenShotGallery {
  height: 550px;
  width: 90%;
  margin: 20px auto;
}

#left {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  left: 45%;
}

#right {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  right: 45%;
}

#right:hover,
#left:hover {
  box-shadow: 0px 6px 1px 2px gray;
}

#indicator {
  height: 23px;
  width: 25px;
  background: gainsboro;
  position: absolute;
  left: 49%;
  margin-top: 5%;
  text-align: center;
  line-height: 23px;
  font-weight: bolder;
}

<div id="screenShotGallery">

  <div id=" controls">
    <div id="indicator"></div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>

Answer 1

看看这个。另外，请记住，数组从 0 开始，因此数组的长度为 9，但这意味着 0-8 而不是 1-9。因此，如果您想使用 current 变量定位数组的一个元素，请像这样将它减 1 names[current - 1]。这样，数组的第一个元素将相当于指示框中的 1。

let names = ["imageone.jpg", "imagetwo.jpg", "imagethree.jpg", "imagefour.jpg", "imagefive.jpg", "imagesix.jpg", "imageseven.jpg", "imageeight.jpg", "imagenine.jpg"];

let imageContainer = document.querySelector("#screenShotGallery img");
let indicator = document.querySelector("#indicator");
let left = document.querySelector("#left");
let right = document.querySelector("#right");
let current = 0;

function rightScroll() {
  current++;

  if (current > names.length) {
    current = 1;
  }
  indicator.textContent = current;
}

function leftScroll() {
  current--;

  if (current === 0) {
    current = names.length;
  }
  indicator.textContent = current;
}

left.addEventListener("click", leftScroll);
right.addEventListener("click", rightScroll);

.screenShots {
  padding-bottom: 30px;
}

#screenShotsIntro {
  text-align: center;
}

#screenShotGallery {
  height: 550px;
  width: 90%;
  margin: 20px auto;
}

#left {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  left: 45%;
}

#right {
  height: 30px;
  width: 30px;
  position: absolute;
  margin-top: 0%;
  right: 45%;
}

#right:hover,
#left:hover {
  box-shadow: 0px 6px 1px 2px gray;
}

#indicator {
  height: 23px;
  width: 25px;
  background: gainsboro;
  position: absolute;
  left: 49%;
  margin-top: 5%;
  text-align: center;
  line-height: 23px;
  font-weight: bolder;
}

<div id="screenShotGallery">

  <div id=" controls">
    <div id="indicator"></div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>