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

Question

我最近在我的网站上添加了两个横幅，我希望每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>

Answer 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（以毫秒为单位）