Question

4我正在开发一个HTML代码，用于根据javascript数组更改图像的演示文稿。

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

目前，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。

Answer 1

您可以在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），只需执行＆＃34;返回false＆＃34;。这会妨碍进一步处理。

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/

Answer 2

这个基本想法可以在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++;
}

您要做的是删除所有循环内容。您可以保留您的计数器（您命名为bnrCntr）。您所要做的就是每次单击按钮时将计数器增加1。

通过这种逻辑，实现递减计数器的“后退”按钮也很容易

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

2 个答案: