0

我想在 javascript 中开始我的 onclick() 函数，style.marginLeft=0就像从'0px' 到'-100%'到'-200%'开始，然后以'-200%'结尾，当它变成 '-200% '如果您再次单击它，它将带您回到 .marginLeft='0' 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()" />

4

3 回答 3

3

您可以在每次迭代时降级 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()" />

于 2021-01-08T12:35:16.980 回答
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()" />

于 2021-01-08T12:38:14.203 回答
1

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

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

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

于 2021-01-08T12:48:16.607 回答