javascript - 事件监听器只工作一次

Question

我正在尝试创建一个滑块，并且有一个按钮用于将元素向左移动。它有效，但只有一次。之后点击无效。这是我下面的代码

HTML

<section class="section3">
  <button class="left">LEFT</button> <!-- button that I click on to move elements to the left -->
  <div class="carousel-container">
    <div class="corousel-element">1</div>
    <div class="carousel-element">2</div>
    <div class="carousel-element">3</div>
    <div class="carousel-element">4</div>
    <div class="carousel-element">5</div>
    <div class="carousel-element">6</div>
    <div class="carousel-element">7</div>
    <div class="carousel-element">8</div>
    <div class="carousel-element">9</div>
    <div class="carousel-element">10</div>
    <div class="carousel-element">11</div>
    <div class="carousel-element">12</div>
    <div class="carousel-element">13</div>
  </div>
</section>

CSS(SASS)

section.section3 {
  overflow: hidden;

  div.carousel-container {
    display: flex;
    overflow: hidden;
    justify-content: center;

    div.carousel-element {
      width: 169px;
      height: 193px;
      background: blue;
      flex-shrink: 0;
    }

    div.corousel-element:not(:first-child) {
      margin-left: 15px;
    }
  }
}

JAVASCRIPT

var buttonLeft = document.querySelector(".left"); // left button
var carouselContainer = document.querySelector(".corousel-container"); // carousel-container

function left() {
  carouselContainer.style.transform = "translate(-20px)"; // here I am trying to move elements to left with translate.
}

buttonLeft.addEventListener("click", left);

标签： javascripthtmlcsssass

Answer 1

这个怎么样？translateX(-???px)由按下左键的次数决定。

// Get HTML elements
const buttonLeft = document.querySelector(".left");
const section3 = document.querySelector(".section3");
const carouselContainer = document.querySelector(".carousel-container");
const crouselElements = document.querySelectorAll(".carousel-element");

// Moving distance of each click
const dx = -20;

// Store how many times the left button is clicked
let counter = 0;

function left() {
  // Get section3 width
  const section3Width = section3.offsetWidth;
  // Get one carousel element width = 169px
  const crouselElementWidth = crouselElements[0].offsetWidth;
  // Get sum of crousel elements width = 169px * 13
  const crouselElementsWidth = crouselElementWidth * crouselElements.length;
  // Calculate movable distance
  const moveableDistance = crouselElementsWidth - section3Width;

  // When the slider reach the last element, stop moving.
  if (Math.abs(counter * dx) > moveableDistance) return;

  // Count up by 1
  counter++;
  // Moving distance is -20px * count
  carouselContainer.style.transform = `translateX(${dx * counter}px)`;
}

buttonLeft.addEventListener("click", left);

.section3 {
  overflow: hidden;
}

.carousel-container {
  display: flex;
  /* overflow: hidden; */
  /* justify-content: center; */
  transition: transform 0.4s linear;
}

.carousel-element {
  width: 169px;
  height: 193px;
  background: blue;
  flex-shrink: 0;
}

.carousel-element:nth-child(even) {
  background: red;
}

<section class="section3">
  <button class="left">LEFT</button>
  <div class="carousel-container">
    <div class="carousel-element">1</div>
    <div class="carousel-element">2</div>
    <div class="carousel-element">3</div>
    <div class="carousel-element">4</div>
    <div class="carousel-element">5</div>
    <div class="carousel-element">6</div>
    <div class="carousel-element">7</div>
    <div class="carousel-element">8</div>
    <div class="carousel-element">9</div>
    <div class="carousel-element">10</div>
    <div class="carousel-element">11</div>
    <div class="carousel-element">12</div>
    <div class="carousel-element">13</div>
  </div>
</section>

---

不计算宽度

// Get HTML elements
const buttonLeft = document.querySelector(".left");
const carouselContainer = document.querySelector(".carousel-container");

// Moving distance
let x = 0;

function left() {
  // Update translateX's value every time
  carouselContainer.style.transform = `translateX(${x -= 20}px)`;
}

buttonLeft.addEventListener("click", left);

.section3 {
  overflow: hidden;
}

.carousel-container {
  display: flex;
  /* overflow: hidden; */
  /* justify-content: center; */
  transition: transform 0.4s linear;
}

.carousel-element {
  width: 169px;
  height: 193px;
  background: blue;
  flex-shrink: 0;
}

.carousel-element:nth-child(even) {
  background: red;
}

<section class="section3">
  <button class="left">LEFT</button>
  <div class="carousel-container">
    <div class="carousel-element">1</div>
    <div class="carousel-element">2</div>
    <div class="carousel-element">3</div>
    <div class="carousel-element">4</div>
    <div class="carousel-element">5</div>
    <div class="carousel-element">6</div>
    <div class="carousel-element">7</div>
    <div class="carousel-element">8</div>
    <div class="carousel-element">9</div>
    <div class="carousel-element">10</div>
    <div class="carousel-element">11</div>
    <div class="carousel-element">12</div>
    <div class="carousel-element">13</div>
  </div>
</section>