The simplest banner rotator created using html code
Lifehacks

The simplest html banner rotator

html простейший ротатор баннеровSometimes you have to add banner rotator to html sites that is not tied to any network, which is as simple as possible to manage and configure. The code that I present below is very convenient – it is very simple, and should not raise questions.

However – if questions still arise – my mail oleksiy@lavrynenko.com is always at your service! 🙂

  1. <div align="center" class="block">
  2. <SCRIPT LANGUAGE="JavaScript">
  3. <!-- Begin -->
  4. var how_many_ads = 3; //number of banners being sorted
  5. var now = new Date()
  6. var sec = now.getSeconds()
  7. var ad = sec % how_many_ads;
  8. ad +=1;
  9. if (ad==1) {
  10. url="Link"; //the address to which the user lands after clicking on the banner
  11. alt="Site name";
  12. banner="Address-from-load-banner"; //address of the banner image itself
  13. width="279";
  14. height="233";
  15. }
  16. if (ad==2) {
  17. url="Links"; //the address to which the user lands after clicking on the banner
  18. alt="Site name";
  19. banner="Address-from-load-banner"; //address of the banner image itself
  20. width="279";
  21. height="233";
  22. }
  23. if (ad==3) {
  24. url="Links"; //the address to which the user lands after clicking on the banner
  25. alt="Site name";
  26. banner="Address-from-load-banner"; //address of the banner image itself
  27. width="280";
  28. height="300";
  29. }
  30. document.write('<center>');
  31. document.write('<a href="' + url + '" target="_top" rel="noopener noreferrer">');
  32. document.write('<img src="' + banner + '" width=');
  33. document.write(width + ' height=' + height + ' ');
  34. document.write('alt="' + alt + '" border=0><br>');
  35. document.write('<small>' + txt + '</small></a>');
  36. document.write('</center>');
  37. // End --></SCRIPT>
  38. </p>
  39. </div>

As you can see from the presented code – the main load lies on a script that generates a random number in a given range (its size is adjusted manually – the code is working on 12 banners). After generating a random number, a given banner is selected and displayed in a layer.

An example of how the code works is available using the link (each time this page is updated, the picture will change randomly – currently there are links to three pictures in the code).