javascript - 基于计数器出现的对象

Question

我正在尝试编写一个基于计数器的简单游戏，背景是图像的形式:

• 每次点击→都会使计数器加一并显示下一张图像

• 每次点击←都会使计数器减一并显示上一张图像

计数器在[0,5]中运行，我尝试编写if语句根据计数器显示或隐藏对象。

问题是它以三种不同的方式工作，但没有一个是我想要的:

• 始终显示所有对象

• 它不显示任何对象

• 或者它只显示第一个对象，奇怪的是我无法移动到最后一张幻灯片，它只是在最后一张幻灯片上完成。

有什么解决办法吗？

var counter = 0;
slides[counter].style.display = "block";

// hide buttons
function hideButtons() {
  left.style.display = "none";
  right.style.display = "none";
}

function slideRight() {


  hideButtons()
  //to stop slides on 0
  if (counter >= slides.length - 1) {
    return;
  }

  slides[counter].style.display = "none";
  counter += 1;
  slides[counter].style.display = "block";


  // after clicking on arrow, position is reseted
  //         var heroMovement = document.querySelector(".hero");
  // let oldTransition = heroMovement.style.transition;
  heroMovement.style.transition = "unset";
  heroMovement.style.transform = "translate3d(30px, 100px, 0)";

}


function slideLeft() {
  hideButtons()

  if (counter <= 0) {
    return;
  }

  slides[counter].style.display = "none";
  counter -= 1;
  slides[counter].style.display = "block";


  heroMovement.style.transition = "unset";
  heroMovement.style.transform = "translate3d(1350px, 100px, 0)";
}


right.addEventListener("click", slideRight);
left.addEventListener("click", slideLeft);

//appearing of characters
// showCharacters()

function showCharacters() {
  var girl = document.querySelector(".girl");
  var lakeGuy = document.querySelector(".lakeGuy");
  var contestGuy = document.querySelector(".contestGuy");


  if (counter <= 1) {
    girl.style.display = "none";
    lakeGuy.style.display = "none";
    contestGuy.style.display = "none";
  } else if (counter = 2) {
    girl.style.display = "block";
  } else if (counter = 3) {
    girl.style.display = "none";
    lakeGuy.style.display = "block";
    contestGuy.style.display = "none";

  } else if (counter = slides.length) {
    lakeGuy.style.display = "none";
    contestGuy.style.display = "block";
  }
}

.girl {
  position: absolute;
  transform: translate3d(700px, 30px, 0);
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  background-color: red;
  z-index: 1;
  //display: none;
}

.lakeGuy {
  position: absolute;
  transform: translate3d(500px, 10px, 0);
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  background-color: #3affa0;
  z-index: 1;
  display: none;
}

.contestGuy {
  position: absolute;
  transform: translate3d(900px, 120px, 0);
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  background-color: #f838ff;
  z-index: 1;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="slider">
  <li><img class="uno" src="images/zero/DSC_0732.JPG"></li>
  <li><img class="duo" src="images/jeden/DSC_0757.JPG"></li>
  <li><img class="tres" src="images/dwa/DSC_0786.JPG"></li>
  <li><img class="tretio" src="images/trzy/DSC_0793.JPG"></li>
  <li><img class="quico" src="images/cztery/DSC_0750.JPG"></li>
</ul>

<div id="emptySpace">
  <span class="opisujacyX">X to :</span>
  <span class="opisujacyY">Y to :</span>
  <span class="left"></span>
  <span class="right"></span>
</div>


<div id="boxMap"></div>

Answer 1

= 是一个赋值运算符，就像将变量分配给字符串、数字、对象等时一样。== 和 === 是相等运算符。尝试在 else if 中更改它。我没有在任何地方看到声明的“幻灯片”变量。