Vanilla JS内容滑块translatex问题 [英] Vanilla JS content slider translatex issue

问题描述

所以基本上我有两个eventListeners用于箭头左右内部这些eventListeners我循环通过图像数组，如果我点击右图像翻译50px向右，但如果我再次点击右图像不转换到右边更多不止一次。同样的问题是左边的eventListener我能在这做什么？我尝试使用累加器，但它无法正常工作。

 <   div     id   =' 容器' >  
 < span class =code-keyword><   div     class   ='  image-container' >  
 <   img     class   ='  move '    src   ='  images / news1.jpg' >  
 < span class =code-keyword><   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' > 对<   / a  >  

JS：

 让 imageContainer =  document  .querySelector（'  .image-container ）; 
 让 arrowLeft =  document  .getElementById（'   arrow-left'）; 
 让 arrowRight =  document  .getElementById（'   arrow-right'）; 
 让 images =  document  .getElementsByClassName（'   move'）; 
 images = 数组 .from（images）; 
 
 arrowRight.addEventListener（' 点击'， function （）{
  function  getImg（img）{
 img.style.transition =   0.5s; 
 img.style.transform = '   translateX（50px）'; 
}; 
 让结果= images.forEach（（element）=> getImg（element））; 
}）; 
 
 arrowLeft.addEventListener（' 点击'， function （）{
  function  getImg（img）{
 img.style.transition =   0.5s; 
 img.style.transform = '   translateX（-50px）'; 
} 
 让结果= images.forEach（（element）=> getImg（element））; 
}）; 

我尝试了什么：



i尝试过使用累加器，所以每次eventListener触发它都会为translateX添加50px所以它移动多次就可以了它累积的时间，所以如果我点击一次图像移动50px但如果我再次点击它移动100px到右边这不是一个正确的解决方案

解决方案

累加器作品对我来说很好：

 让 currentOffset =  0 ; 
  const  pictureWidth =  50 ; 
 
 让 images =  document  .getElementsByClassName（'  move'）; 
 images = 数组 .from（images）; 
 
  function  moveImages（）{
  let  transform = `平移X（

{currentOffset} PX）`;
images.forEach（（element）=> element.style.transform = transform）;
}

document.getElementById（'arrow-left'）。addEventListener（'click'，function（）{
currentOffset = currentOffset - pictureWidth;
moveImages（ ）;
}）;

document.getElementById（'arrow-right'）。addEventListener（'click'，function（）{
currentOffset = currentOffset + pictureWidth;
moveImages（）;
}）;

演示 [ ^ ]

so basically i have two eventListeners for arrow left and right inside these eventListeners im looping through array of images and if i click right the images translate 50px to the right but if i click right again the images do not translate to the right more than once. Same problem is with the left eventListener what can i do here ? i tried using an accumulator but it didn't work properly.

<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>

JS :

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

 arrowRight.addEventListener('click' , function() {
    function getImg (img) {
    	img.style.transition = "0.5s";
    	img.style.transform = 'translateX(50px)';
    };
    let result = images.forEach((element) => getImg(element));
});

arrowLeft.addEventListener('click' , function() {
	function getImg (img) {
		img.style.transition = "0.5s";
	    img.style.transform = 'translateX(-50px)';
	}
	let result = images.forEach((element) => getImg(element));
});

What I have tried:

i have tried using an accumulator so each time eventListener fires it adds 50px to translateX so it moves more than once works fine but each time it accumulates, so if i click once the images move 50px but if i click again it moves 100px to the right which isn't a proper solution

解决方案

An accumulator works fine for me:

let currentOffset = 0;
const pictureWidth = 50;

let images = document.getElementsByClassName('move');
images = Array.from(images);

function moveImages(){
    let transform = `translateX(

{currentOffset}px)`; images.forEach((element) => element.style.transform = transform); } document.getElementById('arrow-left').addEventListener('click' , function() { currentOffset = currentOffset - pictureWidth; moveImages(); }); document.getElementById('arrow-right').addEventListener('click' , function() { currentOffset = currentOffset + pictureWidth; moveImages(); });

Demo[^]

这篇关于Vanilla JS内容滑块translatex问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！