javascript 横幅在第一个横幅上冻结答案

【问题标题】：javascript banners freezes on first bannerjavascript 横幅在第一个横幅上冻结
【发布时间】：2020-01-17 19:33:41
【问题描述】：

我最近在我的网站上添加了两个横幅，我想每 5 秒更换一次横幅，不幸的是，它只显示第一个并冻结

这是我的 foreach 数据的全部代码

var links = ["http://site", "http://site"];
var images = ["/uploads/ad1.png", "/uploads/ad2.png"];
var i = 0;
var renew = setInterval(function() {
  if (links.length == i) {
    i = 0;
  } else {
    document.getElementById("bannerImage").src = images[i];
    document.getElementById("bannerLink").href = links[i];
    i++;

  }
}, 500);

   

<?php  foreach ($messages as $message){

    ?>

                 

                    <a href="?id= <?php echo $message['message_id']?>" class="waves-effect waves-light"> details <i class="fas fa-angle-double-left ml-2"></i>

                </div>

                <br>

            </div>

        </div>
        <div class="container">
            <div class="text-center">

                <a id="bannerLink" href="http://site" onclick="void window.open(this.href); return false;">
                    <img id="bannerImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="320" height="120" alt="some text">
                </a>
            </div>
        </div>



    </div>

【问题讨论】：

div 元素没有加载事件。 window 确实如此。图像做。 iframe 可以。其他媒体元素最有可能。 divs 没有。如果您将 console.log 放在您尝试在加载时运行的方法中，您将看到它没有执行。
感谢@Taplar，我设法完成了这项工作，但我在 php foreach 中有 html 代码，并且横幅仅在第一个 foreach 数据中发生变化，而在第二个数据中没有变化！
php 在服务器上运行，而不是在客户端上运行。所以我不确定服务器端的任何循环会如何影响您尝试在客户端上实现的循环。
除非您说 php 循环会生成重复的 html 元素，否则只有一个可以使用。如果是这种情况，您能否更新您的问题以显示重复的标记，并提供您对呈现的原始代码所做的任何更改。
@Taplar 我更新了我使用的代码，它正在工作，但只在 foreach 数据的第一行

标签： javascript jquery html css banner

【解决方案1】：

此代码将每 5 秒更改一次图像和链接。

var links = ["http://site","http://site"];
var images = ["https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500","https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"];

var i = 0;
var renew = setInterval(function(){    
    document.getElementById("bannerImage").src = images[i];
    document.getElementById("bannerLink").href = links[i];
    i++;
    
    if (i == links.length) {
      i = 0;
    }
}, 5000);

<div class="container">
    <div class="text-center">

        <a id="bannerLink" href="http://site" onclick="void window.open(this.href); return false;">
            <img id="bannerImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="320" height="120" alt="some text">
        </a>
    </div>
</div>

我重新安排了循环，使其始终每 5 秒更改一次图像。在您进行一整轮重置之前，增加 5 秒。

我还将500 更改为5000（以毫秒为单位）

【讨论】：

谢谢，但它只是在 foreach 数据的第一行发生变化！
“foreach 数据的第一行”是什么意思？它应该使用它提供的所有数据。你能举个例子或方法来复制这个问题吗？