Question

希望我没有打破Stack Overflow协议或礼节。
我正在发布另一个问题的解决方案。

原始问题：show-and-hide-images-with-next-previous-button-using-javascript
提问者：user1199537
由bunjerd-sparrow

给出的首选解决方案

此代码效果很好，但我需要它停在图像1（使用上一个按钮）并停在图像11（使用下一个按钮），而不是连续滚动图像。

我相信这对你们来说很轻松。我无法弄清楚是为了挽救我的生命。非常感谢任何和所有帮助。

＆＃13;

 var $c = 0;

 function next() {
   var boxes = document.getElementsByClassName("box");
   $c += 1;
   if ($c >= boxes.length) $c = 0;
   for (var $i = 0; $i < boxes.length; $i++) {
     boxes[$i].style.display = "none";
   }
   boxes[$c].style.display = "block";
   return false;
 }

 function prev() {
   var boxes = document.getElementsByClassName("box");
   $c -= 1;
   if ($c < 0) $c = (boxes.length - 1);
   for (var $i = 0; $i < boxes.length; $i++) {
     boxes[$i].style.display = "none";
   }
   boxes[$c].style.display = "block";
   return false;
 }

＆＃13;

    #container {
      position: relative;
      width: 120px;
      height: 120px;
    }
    #container div {
      position: absolute;
      width: 120px;
      height: 120px;
    }
    #box-red {
      background: red;
    }
    #box-yellow {
      background: yellow;
      display: none;
    }
    #box-green {
      background: green;
      display: none;
    }
    #box-maroon {
      background: maroon;
      display: none;
    }

＆＃13;

<div id="container">
  <div id="box-red" class="box">DIV1</div>
  <div id="box-yellow" class="box">DIV2</div>
  <div id="box-green" class="box">DIV3</div>
  <div id="box-maroon" class="box">DIV4</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>

＆＃13;

Answer 1

更改

if ($c < 0) $c = (boxes.length - 1);

不包裹：

if ($c < 0) $c=0;

和

if ($c >= boxes.length) $c = 0;

不包装

if ($c >= boxes.length) $c = boxes.length-1;

＆＃13;

var $c = 0;

function next() {
  var boxes = document.getElementsByClassName("box");
  $c += 1;
  if ($c >= boxes.length) $c = boxes.length - 1;
  for (var $i = 0; $i < boxes.length; $i++) {
    boxes[$i].style.display = "none";
  }
  boxes[$c].style.display = "block";
  return false;
}

function prev() {
  var boxes = document.getElementsByClassName("box");
  $c -= 1;
  if ($c < 0) $c = 0;
  for (var $i = 0; $i < boxes.length; $i++) {
    boxes[$i].style.display = "none";
  }
  boxes[$c].style.display = "block";
  return false;
}

＆＃13;

#container {
  position: relative;
  width: 120px;
  height: 120px;
}
#container div {
  position: absolute;
  width: 120px;
  height: 120px;
}
#box-red {
  background: red;
}
#box-yellow {
  background: yellow;
  display: none;
}
#box-green {
  background: green;
  display: none;
}
#box-maroon {
  background: maroon;
  display: none;
}

＆＃13;

<div id="container">
  <div id="box-one" class="box">10</div>
  <div id="box-two" class="box">9</div>
  <div id="box-three" class="box">8</div>
  <div id="box-four" class="box">7</div>
  <div id="box-five" class="box">6</div>
  <div id="box-six" class="box">5</div>
  <div id="box-seven" class="box">4</div>
  <div id="box-eight" class="box">3</div>
  <div id="box-nine" class="box">2</div>
  <div id="box-ten" class="box">1</div>
  <div id="box-nothing" class="box">0</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>

＆＃13;

Answer 2

只是不要运行代码来显示新框，并在点击第一张或最后一张图像时增加/减少计数器。

if ($c < boxes.length - 1) {
    // Do logic
}

和

if ($c > 0) {
    // Do logic
}

示例

var $c = 0; function next() { var boxes = document.getElementsByClassName("box"); if ($c < boxes.length - 1) { $c += 1; for (var $i = 0; $i < boxes.length; $i++) { boxes[$i].style.display = "none"; } boxes[$c].style.display = "block"; } return false; } function prev() { var boxes = document.getElementsByClassName("box"); if ($c > 0) { $c -= 1; for (var $i = 0; $i < boxes.length; $i++) { boxes[$i].style.display = "none"; } boxes[$c].style.display = "block"; } return false; }

#container { position: relative; width: 120px; height: 120px; } #container div { position: absolute; width: 120px; height: 120px; } #box-red { background: red; } #box-yellow { background: yellow; display: none; } #box-green { background: green; display: none; } #box-maroon { background: maroon; display: none; }

<div id="container"> <div id="box-red" class="box">DIV1</div> <div id="box-yellow" class="box">DIV2</div> <div id="box-green" class="box">DIV3</div> <div id="box-maroon" class="box">DIV4</div> </div> <button onClick="return prev();">previous</button> <button onClick="return next();">next</button>

如何让按钮在第一张和最后一张图像停止

2 个答案: