Question

我当时正在制作图片库，但遇到了这个问题，当我向右滚动几次然后向左滚动时，最后一张图像显示两次，并且当前图像编号[指示器]与图像的索引不匹配。阵列中的项目，我在哪里弄糟？对此原因的任何解释也将不胜感激。

<p>Session Timeout In: <span id="countTimer">60</span> seconds....</p>
<button id="delay">Delay</button>

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;
}

Answer 1

看看这个。另外，请记住，数组从0开始，因此数组的长度为9，但这意味着0-8而不是1-9。因此，如果要使用current变量来定位数组的元素，请像这样names[current - 1]那样将其减少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>

滚动浏览一系列图像，

1 个答案: