Question

我有一个事件监听器。在其中，我遍历了3张图像并将样式translateX(350px)应用于它们。它工作得很好，但只能工作一次。

我单击一次鼠标右键，图像向右移动，但是如果再次单击鼠标右键，图像将不移动。如何使事件监听器多次触发，使图像多次移动？关于堆栈溢出也有类似的问题，但我听不懂。

HTML：

<div id='container'>
  <div class='image-container'>
    <img class='move' src='images/news1.jpg'>
    <img class='move' src='images/news2.jpg'>
    <img class='move' src='images/news3.jpg'>
  </div>
</div>
<a href="#" id='arrow-left'>left</a>
<a href="#" id='arrow-right'>right</a>

JavaScript：

let imageContainer = document.querySelector('.image-container');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let images = document.getElementsByClassName('move');

arrowRight.addEventListener('click', function() {
  for (i = 0; i < images.length; i++) {
    images[i].style.transition = "0.5s";
    images[i].style.transform = 'translateX(350px)';
  }
});

Answer 1

您可能需要使用累加器进行转换，以便它们记住其先前的翻译状态，例如，第一次为350，第二次为700，等等。

尝试一下：

var accum = 350;

let imageContainer = document.querySelector('.image-container');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let images = document.getElementsByClassName('move');


arrowRight.addEventListener('click' , function() {
  for (let i = 0 ; i < images.length; i++) {
    images[i].style.transition = "0.5s";
      images[i].style.transform = 'translateX(' + accum + 'px)';
  }
accum+= 350;
});

<div id='container'>
    <div class='image-container'>
        <img class='move' src='images/news1.jpg'>
        <img class='move' src='images/news2.jpg'>
        <img class='move' src='images/news3.jpg'>
    </div>

</div>
<a href="#" id='arrow-left'>left</a>
<a href="#" id='arrow-right'>right</a>

Answer 2

演示：http://jsfiddle.net/crmqj91t/15/ TranslateX获取初始渲染位置的参考。因此，每次您将convertx设置为350px时，它就相对于原点而言都保持在同一点。

我添加了一个计步器，可以在每个步骤中设置距原点的正确距离。

let imageContainer = document.querySelector('.image-container');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let images = document.getElementsByClassName('move');
let step = 1;

arrowRight.addEventListener('click', function() {
  for (i = 0; i < images.length; i++) {
    images[i].style.transition = "0.5s";
    images[i].style.transform = 'translateX(' + step * 50 + 'px)';
  }
  step++;
});

addEventListener仅工作一次

2 个答案: