Question

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

每次点击→都会将计数器增加1并显示下一张图片
每次点击←都会将计数器减一，并显示上一张图片

计数器在[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

=是赋值运算符，就像将变量赋给字符串，数字，对象等时一样。==和===是相等运算符。尝试在你的其他地方改变它，如果是的话。我没有在任何地方看到'slide'变量。

基于计数器出现的对象

1 个答案: