Simple Trick

Make Ads mode roll

Sample Simple Code for make Ads mode roll, with 2 url link, where to appear alternately with a certain time

<!DOCTYPE html>
<head>
  <title>My Website</title>
</head>
<body>
<div style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width:50%;">
    <a href="#" target="_blank"><img src="https://example.com/banners.gif" id="ad1" style="position: relative; width: 728px; height: 90px; z-index: 1;"></a>
    <a href="#" target="_blank"><img src="http://example1.com/banner5.gif" id="ad2" style="position: relative; width: 728px; height: 90px; z-index: 0; display: none;"></a>
  </div>


  <script>
    let ads = ["https://example.com/?ref=xxx", "https://example1.com/?ref=urname"];
    let currentAdIndex = 0;

    function rotateAds() {
      let ad1 = document.getElementById("ad1");
      let ad2 = document.getElementById("ad2");

      if (currentAdIndex === 0) {
        ad1.style.display = "block";
        ad2.style.display = "none";
        ad1.parentNode.href = ads[0];
        currentAdIndex = 1;
      } else {
        ad1.style.display = "none";
        ad2.style.display = "block";
        ad2.parentNode.href = ads[1];
        currentAdIndex = 0;
      }
    }

    setInterval(rotateAds, 5000);
  </script>
</body>
</html>

The example below is the result of the code above using 4 urls

close