如何使用 Javascript 移动图像一定数量的像素答案

【问题标题】：How to Move Images a Certain Amount of Pixels Using Javascript如何使用 Javascript 移动图像一定数量的像素
【发布时间】：2021-11-23 01:44:58
【问题描述】：

我正在尝试使用 Javascript 在容器内移动图像。最终，我想使用 setTimeout 移动它，但现在尝试在按钮单击时使用事件侦听器来移动它。它似乎有效，但只有一次。单击按钮时，我想继续移动图像。任何帮助都是有帮助和感激的。

   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>
   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>
   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>
   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>


</div>

<button id="moveIt">MOVE</button>

<style>

.container {
display: flex;
justify-content: space-around;
overflow: hidden;
max-width: 100%;
z-index: 222;
}

.images {
width: 300px !important;
display: block;
text-align: center;
margin-right: 10px;
height: 400px !important;
}


</style>


<script> 

let images = document.querySelectorAll('.images');
const moveBtn = document.getElementById('moveIt');

let pleaseWork = () => {
   for(i=0; i < images.length; i++) {
   images[i].style.marginLeft = "-300px";
   }
 }
moveBtn.addEventListener('click', pleaseWork);

</script>

【问题讨论】：

标签： javascript slider

【解决方案1】：

您将 margin-left 设置为一个静态数字，而不是增加它。这是一个访问当前 margin-left 的示例，将其从 'px' 中剥离，将其转换为数字，然后将其递增并将其应用回元素。

let images = document.querySelectorAll('.images');
const moveBtn = document.getElementById('moveIt');
let increment = -10
let pleaseWork = () => {
  for (i = 0; i < images.length; i++) {
    let ml = Number(images[i].style.marginLeft.replaceAll('px', ''))
    ml += increment
    images[i].style.marginLeft = `${ml}px`;
  }
}
moveBtn.addEventListener('click', pleaseWork);

.container {
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  max-width: 100%;
  z-index: 222;
}

.images {
  width: 300px !important;
  display: block;
  text-align: center;
  margin-right: 10px;
  height: 400px !important;
}

<div class="images">
  <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="images">
  <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="images">
  <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="images">
  <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>


</div>

<button id="moveIt">MOVE</button>

【讨论】：