javascript - 如何让按钮停在第一张和最后一张图片

Question

希望我在这里没有违反 Stack Overflow 协议(protocol)或礼仪。
我正在从发布的另一个问题中重新发布此解决方案。

原始问题:show-and-hide-images-with-next-previous-button-using-javascript
提问者:user1199537
首选解决方案:bunjerd-sparrow

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

我相信这对你们来说是轻松的工作。我只是想不出来救我的命。非常感谢任何帮助。

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

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

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;

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

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