Javascript 添加HTML按钮以处理循环数组中元素的增量_Javascript_Html_Arrays

Javascript 添加HTML按钮以处理循环数组中元素的增量

javascript html arrays

Javascript 添加HTML按钮以处理循环数组中元素的增量,javascript,html,arrays,Javascript,Html,Arrays,4I目前正在为一个基于javascript数组更改图像的演示文稿编写HTML代码我设法将一个朋友的循环代码合并到我的代码中，但我不知道如何只更改一次图像目前，javascript循环数组中的项目以显示不同的图像是可行的，但我希望它能够工作，它只改变一次，基于按钮点击如果可能的话，我想保留我的数组。代码如下： <html> <head> <script type='text/javascript'> var banners = ["bann

4I目前正在为一个基于javascript数组更改图像的演示文稿编写HTML代码

我设法将一个朋友的循环代码合并到我的代码中，但我不知道如何只更改一次图像

目前，javascript循环数组中的项目以显示不同的图像是可行的，但我希望它能够工作，它只改变一次，基于按钮点击

如果可能的话，我想保留我的数组。代码如下：

<html>

<head>
  <script type='text/javascript'>
    var banners = ["banner1.png", "banner2.png", "banner3.png"
      "banner4.png"
    ];
    var bnrCntr = 0;
    var timer;

    function banCycle() {
      if (++bnrCntr == 4)
        bnrCntr = 0;

      timer = setTimeout("banCycle()", 4000);
    }

    function stopCycle() {
      clearTimeout(timer);
    }
  </script>
</head>

<body>
  <img src="bannerad1.png" name="banner" width=110 height=200>

  <form>
    <input type="button" value="Cycle" name="Cycle" onclick="banCycle()">
    <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
  </form>
</body>

</html>


var banners=[“banner1.png”、“banner2.png”、“banner3.png”
“banner4.png”
];
var bnrCntr=0；
无功定时器；
函数banCycle（）{
如果（++bnrCntr==4）
bnrCntr=0；
定时器=设置超时（“banCycle（）”，4000）；
}
函数stopCycle（）{
清除超时（计时器）；
}

提前谢谢你

编辑- 为了澄清，我仅限于纯javascript/HTML，因此不能使用JSQuery。

您可以在jquery中使用事件。它只会触发一次单击事件

<script>
  $().ready(function(){
    var banners = ["banner1.png","banner2.png","banner3.png""banner4.png"];
    var bnrCntr = 0;
    var timer;
    $('input:button[name=Cycle]').one("click",function()
    {
      if(++bnrCntr == 4)
      bnrCntr = 0;

      document.images.banner.src = banners[bnrCntr];

      timer = setTimeout("banCycle()",1000);
    });

    $('input:button[name=Stop]').one("click",function()
    {
      clearTimeout(timer);
    });
});
    </script>

示例：

基本思想可以在这里看到

HTML

<img id="banner" src="http://placehold.it/350x150">
<button onclick="next()">
  Next Image
</button>

你要做的是去掉你所有的自行车用品。您可以保留您的计数器（您所命名的

bnrCntr

）。您所要做的就是每次单击按钮时将计数器增加一个

通过这种逻辑，还可以很容易地实现一个“后退”按钮，该按钮使计数器递减

remove

timer=setTimeout（“banCycle（）”，1000）？听起来您想要一个按钮前进到下一个图像？并且没有在阵列的其余部分循环？@Manufactor它没有工作，不管怎样，我正在寻找它在点击按钮时工作，删除循环超时仍然会使其循环。@Enigram是的，这是正确的。听起来很棒！然而，我目前仅限于纯javascript/HTML编码。
<img id="banner" src="http://placehold.it/350x150">
<button onclick="next()">
  Next Image
</button>

var banners = ["http://placehold.it/350x150", "http://placehold.it/400x200", "http://placehold.it/300x100"]
var counter = 1;

function next() {
  if (counter >= banners.length){
    counter=0;
  }
  document.images.banner.src = banners[counter];
  counter++;
}