javascript - 变量没有变化。错误在哪里？

Question

我正在尝试使用标志做一个简单的 slider ，但我相信当我这么说时它的值并没有改变。我是初学者，所以这可能是一个愚蠢的错误，有什么帮助吗？顺便说一句，这也可能是我添加的类中的一个错误，但我不确定。

这是我的代码，只需要注意js或者css中的最后三个类。我知道那里有错误，但找不到它。

const prev = document.querySelector('#prev'),
  next = document.querySelector('#next'),
  one = document.querySelector('.slide1'),
  two = document.querySelector('.slide2'),
  three = document.querySelector('.slide3');

var flag = 1;

next.addEventListener('click', function() {
  if (flag == 0) {
    one.classList.add('middle');
    two.classList.add('right');
    three.classList.add('left');
    flag = 1;
  } else if (flag == 1) {
    one.classList.add('left');
    two.classList.add('middle');
    three.classList.add('right');
    flag = 2;
  } else if (flag == 2) {
    one.classList.add('right');
    two.classList.add('left');
    three.classList.add('middle');
    flag = 0;
  }
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 80%;
  background: lightblue;
  margin: 0 auto;
  height: 300px;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}

.slide1 {
  background: pink;
}

.slide2 {
  transform: translateX(100%);
  background: teal;
}

.slide3 {
  transform: translateX(-100%);
  background: yellow;
}

.btn {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  background: blue;
  z-index: 40;
  top: 135px;
  cursor: pointer;
}

#prev {
  left: 10px;
}

#next {
  right: 10px;
}

.left {
  transform: translateX(-100%);
  transition: all .5s;
}

.middle {
  transform: translateX(0%);
  transition: all .5s;
}

.right {
  transform: translateX(100%);
  transition: all .5s;
}

<div class="container">
  <button type="button" id="prev" class="btn"></button>
  <div class="slide1 slide">
    <h1>One</h1>
  </div>
  <div class="slide2 slide">
    <h1>Two</h1>
  </div>
  <div class="slide3 slide">
    <h1>Three</h1>
  </div>
  <button type="button" id="next" class="btn"></button>
</div>

Answer 1

我注意到的第一件事是您只添加了类。

我认为您还打算使用 classList.remove() 删除不应再应用的类。

const prev = document.querySelector('#prev'),
      next = document.querySelector('#next'),
      one = document.querySelector('.slide1'),
      two = document.querySelector('.slide2'),
      three = document.querySelector('.slide3');

var flag = 1;

next.addEventListener('click', function(){
  if (flag == 0) {
    one.classList.add('middle');
    one.classList.remove('left', 'right');
    two.classList.add('right');
    two.classList.remove('left', 'middle');
    three.classList.add('left');
    three.classList.remove('middle', 'right');
    flag = 1;
  }
  else if (flag == 1) {
    one.classList.add('left');
    one.classList.remove('middle', 'right');
    two.classList.add('middle');
    two.classList.remove('left', 'right');
    three.classList.add('right');
    three.classList.remove('left', 'middle');
    flag = 2;
  }
  else if (flag == 2) {
    one.classList.add('right');
    one.classList.remove('left', 'middle');
    two.classList.add('left');
    two.classList.remove('middle', 'right');
    three.classList.add('middle');
    three.classList.remove('left', 'right');
    flag = 0;
  }
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 80%;
  background: lightblue;
  margin: 0 auto;
  height: 300px;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}

.slide1 {
  background: pink;
}

.slide2 {
  transform: translateX(100%);
  background: teal;
}

.slide3 {
  transform: translateX(-100%);
  background: yellow;
}

.btn {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  background: blue;
  z-index: 40;
  top: 135px;
  cursor: pointer;
}

#prev {
  left: 10px;
}

#next {
  right: 10px;
}

.left {
  transform: translateX(-100%);
  transition: all .5s;
}

.middle {
  transform: translateX(0%);
  transition: all .5s;
}

.right {
  transform: translateX(100%);
  transition: all .5s;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Try</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>

<div class="container">
  <button type="button" id="prev" class="btn"></button>

  <div class="slide1 slide"><h1>One</h1></div>
  <div class="slide2 slide"><h1>Two</h1></div>
  <div class="slide3 slide"><h1>Three</h1></div>

  <button type="button" id="next" class="btn"></button>
</div>

<script src="./js.js" charset="utf-8"></script>
</body>
</html>

现在它每次都会在您的幻灯片中显示正确的“面板”，但我不确定动画是否完全符合您的预期。

看起来像向右滚动时，最左边的元素“跃过”其他两个元素的顶部，向右移动。

您可以尝试元素' z-index将最左边或最右边(取决于滚动方向)放在其他两个元素后面。

JavaScript 可以使用 .style.zIndex 设置 z-index。