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 (以毫秒为单位)