如何在 Javascript 中增加 marginLeft onclick？

Question

我想在 javascript style.marginLeft=0 中开始我的 onclick() 函数，就像从 '0px' 到 ' 开始一样-100%' 到 '-200%' 然后在最后加上 '-200%'，当它变成'-200%' 如果您再次单击它，它将把您带回到 .marginLeft='0' Code on Jsfiddle

var x = document.getElementsByClassName('box')[0];
var u = -100;
function addMargin() {
  var current = x.style.marginLeft = u + '%';
  if (x.style.marginLeft == -200) {
    x.style.marginLeft = '0';
  } else {}
}

#container { display: inline-block; position: relative; width: 100%; height: 150px; white-space: 
             nowrap; overflow: hidden; }
.box { width: 100%; height: 150px; 
       display: inline-block; position: relative; }
.box:nth-child(1) { background: lightblue; }
.box:nth-child(2) { background: red; }
.box:nth-child(3) { background: green; }

<div id='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

Answer 1

您可以在每次迭代中使用 100 进行递减，并使用取模运算符 (% 400) 进行重置

这是一个例子：

var x = document.getElementsByClassName('box')[0];
var u = -100;

function addMargin() {
  x.style.marginLeft = u + '%';
  u -= 100
  u %= 400
  console.log("margin-left:", x.style.marginLeft)
}

#container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 150px;
  white-space: nowrap;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 150px;
  display: inline-block;
  position: relative;
}

.box:nth-child(1) {
  background: lightblue;
}

.box:nth-child(2) {
  background: red;
}

.box:nth-child(3) {
  background: green;
}

.as-console-wrapper {
  max-height: 20px !important;
}

<div id='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

Answer 2

条件匹配错误您需要使用一些外部计数变量进行验证而不是匹配 marginLeft

var x = document.getElementsByClassName('box')[0];
var u = -100;

var count = 1;

function addMargin() {
   count = count%3;
   x.style.marginLeft = count * u + '%';
   count++;
}

#container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 150px;
  white-space: nowrap;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 150px;
  display: inline-block;
  position: relative;
  transition:all 0.8s ease;
}

.box:nth-child(1) {
  background: lightblue;
}

.box:nth-child(2) {
  background: red;
}

.box:nth-child(3) {
  background: green;
}

<div id='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

Answer 3

这是我现在能想到的 cleanest/most 紧凑实现。正如其他人所说，关键是使用 Remainder Operator.

此外，请使用 addEventListener/removeEventListener API，因为多年来它一直是处理事件的正确方法。

const box0 = document.getElementsByClassName('box')[0];

box0._current = 0;

function addMargin() {
  box0.style.marginLeft = `-${++box0._current % 4 * 100}%`;
}

document.getElementById('button').addEventListener('click', addMargin);

#container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 150px;
  white-space: 
  nowrap; overflow: hidden;
}

.box {
  width: 100%; height: 150px; 
  display: inline-block;
  position: relative;
}

.box:nth-child(1) {
  background: lightblue;
}

.box:nth-child(2) {
  background: red;
}

.box:nth-child(3) {
  background: green;
}

<div id='container'>
  <div class='box'>0</div>
  <div class='box'>1</div>
  <div class='box'>2</div>
</div>

<input id='button' type="button" value="Next>" />

如何在 Javascript 中增加 marginLeft onclick？

How can I increase marginLeft onclick in Javascript?

javascript

margin-left