Solution 1 :

This code here will change the image and the link every 5 seconds.

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>

I rearranged the loop so it will always change an image every 5 seconds. Before you have the reset taking an entire round, adding 5 seconds.

I also changed 500 to 5000 (it’s in milliseconds)

Problem :

I have two banners which I added recently to my website and I’d like to change the banners every 5 seconds,
unfortunately, it shows only the first one and freezes

this is my whole code for foreach data

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>

Comments

Comment posted by Taplar

div

Comment posted by iPhone Store

thanks @Taplar, I managed to get this workoing, but I have the html code inside php foreach and the banners are changing just in the first foreach data and not changing in the second !

Comment posted by Taplar

php

Comment posted by Taplar

Unless you are saying that the php loop generates duplicate html elements, that only one works with. If that is the case, can you please update your question to show the duplicated markup, and also provide any changes you have made to the original code presented.

Comment posted by iPhone Store

@Taplar I updated the code I used and it’s working but only in the first row of foreach data

Comment posted by iPhone Store

thanks, but it’s the same it changes only on the first row of foreach data !

Comment posted by Jack

What do you mean by “the first row of foreach data”? It should use all the data that it is given. Could you give an example or a way to replicate the issue?

By

Leave a Reply

Your email address will not be published. Required fields are marked *