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

Adding HTML button to handle incrementation over element within a from within a looping array

本文关键字：元素 数组 按钮 HTML 处理 循环 添加      更新时间：2023-09-26

4我目前正在为一个基于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>

提前谢谢！

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

基本思想可以在这里看到JSFIDDLE

HTML

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

JavaScript

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

你想做的是删除你所有的自行车用品。您可以保留您的Counter（您已命名为bnrCntr）。您所要做的就是每次单击按钮时将计数器增加一。

通过这种逻辑，实现"；背面"；减少计数器的按钮

您可以在jquery中使用.one()事件。它只会触发一次点击事件。

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

对于非jquery（纯javascript），只需执行"return false"即可。这将阻止进一步的处理。

var banners = ["banner1.png","banner2.png","banner3.png""banner4.png"];
var bnrCntr = 0;
var timer;
var executedBanCycle = false;
var executedStopCycle = false;
function banCycle(e)
{
  if(executedBanCycle)
      return false;
  executedBanCycle = true;
  alert("Execute BanCyle");
  if(++bnrCntr == 4)
  bnrCntr = 0;
  document.images.banner.src = banners[bnrCntr];
  timer = setTimeout("banCycle()",1000);       
}
function stopCycle(e)
{
    if(executedStopCycle)
       return false;  
  executedStopCycle = true;
  alert("Execute stopCyle");
   clearTimeout(timer);
}

示例：http://jsfiddle.net/f5xn7zhk/

相关文章：