Javascript 如何使按钮在第一个和最后一个图像处停止

希望我没有破坏这里的堆栈溢出协议或礼节。
我从发布的另一个问题重新发布此解决方案。

原始问题：
询问人：
首选解决方案由以下人员给出：

这段代码工作得很好，但我需要它停在图像1（使用上一个按钮）和图像11（使用下一个按钮），而不是连续滚动图像

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

var$c=0；
函数next（）{
var-box=document.getElementsByClassName（“box”）；
$c+=1；
如果（$c>=box.length）$c=0；
对于（变量$i=0；$i

#容器{
位置：相对位置；
宽度：120px；
高度：120px；
}
#货柜组{
位置：绝对位置；
宽度：120px；
高度：120px；
}
#盒红{
背景：红色；
}
#黄色盒子{
背景：黄色；
显示：无；
}
#绿色盒子{
背景：绿色；
显示：无；
}
#箱形褐红色{
背景：褐红色；
显示：无；
}

第一组
第二组
第三组
第四组
以前的
下一步

更改

if（$c<0）$c=（box.length-1）

不包装：

如果（$c<0）$c=0

及

如果（$c>=box.length）$c=0

不包

如果（$c>=box.length）$c=box.length-1


var$c=0；
函数next（）{
var-box=document.getElementsByClassName（“box”）；
$c+=1；
如果（$c>=box.length）$c=box.length-1；
对于（变量$i=0；$i

#容器{
位置：相对位置；
宽度：120px；
高度：120px；
}
#货柜组{
位置：绝对位置；
宽度：120px；
高度：120px；
}
#盒红{
背景：红色；
}
#黄色盒子{
背景：黄色；
显示：无；
}
#绿色盒子{
背景：绿色；
显示：无；
}
#箱形褐红色{
背景：褐红色；
显示：无；
}

10
9
8.
7.
6.
5.
4.
3.
2.
1.
0
以前的
下一步
只需在点击第一张或最后一张图像时，不要运行代码来显示新框并增加/减少计数器

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

示例


var$c=0；
函数next（）{
var-box=document.getElementsByClassName（“box”）；
如果（$c0）{
$c-=1；
对于（变量$i=0；$i

#容器{
位置：相对位置；
宽度：120px；
高度：120px；
}
#货柜组{
位置：绝对位置；
宽度：120px；
高度：120px；
}
#盒红{
背景：红色；
}
#黄色盒子{
背景：黄色；
显示：无；
}
#绿色盒子{
背景：绿色；
显示：无；
}
#箱形褐红色{
背景：褐红色；
显示：无；
}

第一组
第二组
第三组
第四组
以前的
接下来
感谢您的回复！您的解决方案也很有效！！当需要特定序列中的图像时，这是一个更好的解决方案。此外，在第一个或最后一个图像上，它不会执行下一个/上一个代码，因此性能稍好，这是总体最佳实践。抱歉@mplungjan我在添加其他图像并尝试按顺序运行它们时遇到问题。您是否给了它们一个box类？你能显示一些代码吗？CSS导致了序列错误。显示：无；不应位于第一个div上。但应位于CSS中的以下div上。然后，div应该在HTML中按您想要的顺序放置。所以这个错误不是你的。对不起！！
if ($c > 0) {
    // Do logic
}