Below is a simple rotating banner script written in Javascript which you can use in Static HTML Modules or Ad Modules.
All the banner links and images are hardcoded in the script. If you want them to be dynamic, you can use PHP to generate the links and image sources and then you have to use PHP Module to display them on the page.
Demo:
You can find a demo at https://vbmods.rocks/rotating-banner-demo
All the banner links and images are hardcoded in the script. If you want them to be dynamic, you can use PHP to generate the links and image sources and then you have to use PHP Module to display them on the page.
Code:
<div class="h-align-center"> <!-- Insert default image and link here --> <a id="rotateBannerLink" href="https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front" target="_blank"><img id="rotateBannerImg" src="https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154" alt="" /></a> </div> <script> (function() { // list down all possible images and links here var bannerImages = [ { link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front', src: 'https://vbmods.rocks/filedata/fetch?id=6967&d=1508057154' }, { link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front', src: 'https://vbmods.rocks/filedata/fetch?id=6964&d=1508045443' }, { link: 'https://teespring.com/i-love-vbmods-rocks?tsmac=store&tsmic=vbmodsrocks-accessories-store#pid=46&cid=6578&sid=front', src: 'https://vbmods.rocks/filedata/fetch?id=6968&d=1508057279' }, { link: 'https://teespring.com/new-css-puns-wife#pid=369&cid=6513&sid=front', src: 'https://vangogh.teespring.com/v3/image/c4I0AwoTTsBkLWC0QyUEmR62_pg/480/560.jpg' }, { link: 'https://teespring.com/vbmods-that-rock-shirts-2#pid=228&cid=5917&sid=front', src: 'https://vangogh.teespring.com/v3/image/C4Evq25AXapV9rSmsd201_V3ht0/480/560.jpg' }, { link: 'https://teespring.com/vbmods-that-rock-shirts-2#pid=522&cid=101870&sid=front', src: 'https://vangogh.teespring.com/v3/image/_Nb7aR3ULlyR0c6V7N4zZw6ET5w/480/560.jpg' } /* no trailing comma here at the last item */ ], link = document.getElementById('rotateBannerLink'), image = document.getElementById('rotateBannerImg'); // function to get a random banner from the list of banners function rotateBanner() { var index = Math.floor(Math.random() * bannerImages.length); image.src = bannerImages[index].src; link.href = bannerImages[index].link; } if (link && image) { // rotate the banner every 3 seconds window.setInterval(rotateBanner, 3000); //1000 (msec) = 1 sec (adjust as needed) } else { console.log('Error: Link and/or image does not exist. Make sure the <a> and <img> IDs are correct.'); } })(); </script>
You can find a demo at https://vbmods.rocks/rotating-banner-demo
Comment