Question

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

这是我的代码，只需注意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。

变量没有改变。错误在哪里？

1 个答案: