从屏幕上的按钮 (html) 迭代数组答案

【问题标题】：Iterate Array from on screen button (html)从屏幕上的按钮 (html) 迭代数组
【发布时间】：2020-12-29 10:31:42
【问题描述】：

我正在尝试使用屏幕按钮来向前/向后移动显示图像的阵列。但是，我希望轮播功能保持原样（因此，如果我单击它会重新启动 8 秒周期，如果我什么都不做，它会继续保持原样）。

<script>

var myIndex = 0;
carousel();

function carousel() 
{
    var i;
    var x = document.getElementsByClassName("radar");
    for (i = 0; i < x.length; i++) 
    {
       x[i].style.display = "none";  
    }
    myIndex++;

    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  

    setTimeout(carousel, 8000); // number of seconds 

}


</script>

我已经构建了屏幕按钮，但不确定如何根据需要向前/向后移动索引。 “雷达”元素只是我在显示循环中使用的一系列图像。

【问题讨论】：

我认为如果您在 JSFiddle 或 Plunkr 之类的东西中创建一个“工作”示例会有所帮助，以便我们检查您当前的行为。

标签： html arrays for-loop button indexing

【解决方案1】：

要保持轮播并允许按钮将其向前\向后移动，您可以使用 clearTimeout 函数清除当前回调，然后将其重置。

当按钮用于向前移动轮播时，传入一个标志来重置超时。

试试这个代码：

<script>

var myIndex = 0;
var timeout = null;
carousel();

function carousel(dir)  // dir is null if timeout
{
    var i;
    var x = document.getElementsByClassName("radar");
    for (i = 0; i < x.length; i++) 
    {
       x[i].style.display = "none";  
    }
    myIndex+= dir? dir : 1; //if dir is null, no button click, move carousel forward

    if (myIndex > x.length) {myIndex = 1}
    if (myIndex < 0) {myIndex = x.length}
    
    x[myIndex-1].style.display = "block";  
    
    if (dir) { clearTimeout(timeout); }  // button click, clear existing timeout

    timeout = setTimeout(carousel, 8000); // number of seconds 

}


</script>

<body>
    <button class="button button1" onclick="carousel(1)" >Next</button>
    <button class="button button1" onclick="carousel(-1)">Previous</button>
</body>

【讨论】：

我在答案区域发布了一个后续问题，因为我无法以相同的格式将其复制/粘贴回此处。
太棒了！感谢您的帮助。

【解决方案2】：

所以我遇到了一些困难。我已经按如下规定定义了按钮：

.button {
  border: 2px solid #80ff00
  color: white;
  width: 100px;
  height: 40px;  
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

}

.button1 { 
  background-color: #808080;
  position: absolute;
  bottom: 0px;
  right: 150px;
} //forward button

如何将其合并到轮播中？我正在尝试使用一个按钮将轮播按顺序向前移动，并使用以下按钮向后移动：

.button2 {
  background-color: #808080;
  position: absolute;
  bottom: 0px;
  left: 200px;
}

我试图在代码中创建一个新的 div，但是我相信我必须将按钮按下嵌入到实际的轮播函数中才能向前/向后迭代。我只是不知道如何合并它。

【讨论】：