Search code examples
javascriptjqueryhtmltimerrotator

How to get my jquery banner to be random on page refresh, Has timer on it

How to get my jquery banner to be random on page refresh, it has a timer on it so the banner changes every 23 seconds or so without reloading the page.

However the same banner shows up at the start, so i figure it could be fixed with a random page reload jquery.

Here is the code it works fine just need the banners to also refresh when page gets reloaded.

I have tried many options and cant find a solution.

Thanks.

<script type='text/javascript'>
var imgs1 = new Array('https://paidtoclick.ca/bann/ani.gif','https://paidtoclick.ca/bann/247bux.gif','https://paidtoclick.ca/bann/brab.gif ','https://paidtoclick.ca/bann/CHP.gif','https://paidtoclick.ca/bann/Deft.gif','https://paidtoclick.ca/bann/heard.gif','https://paidtoclick.ca/bann/hg1.gif','https://paidtoclick.ca/bann/Hope.gif','https://paidtoclick.ca/bann/lon.jpg','https://paidtoclick.ca/bann/MZJ.gif','https://paidtoclick.ca/bann/oxj.gif','https://paidtoclick.ca/bann/play.jpg','https://paidtoclick.ca/bann/hg2.gif','https://paidtoclick.ca/bann/z8.gif');
var lnks1 = new Array('http://sendearnings.com','http://bucks247.com','http://www.aanbieding.nl','http://coolhandpoker.com','http://www.deftones.com','http://www.ciao.co.uk','https://hostgator.com','https://www.facebook.com/hopenhagen','http://www.thelongevitynowconference.com','http://www.metzonderjas.nl','http://www.oxfam.org.uk/oxjam','https://www.bricksandtoys.nl','https://www.hostgator.com','https://www.zazzle.com/?rf=238005296547767598');
var alt1 = new Array('Featured Weekly Banner','Featured Weekly Banner','Featured Weekly Banner');
var currentAd1 = 0;
var imgCt1 = 14;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval('cycle1()',23000);
</script>
<a href='http://sendearnings.com' id='adLink1' target='_top'>
<img src='https://paidtoclick.ca/bann/ani.gif' id='adBanner1' border='0' width='234' height'60'></a></div>

You can view the code in action on the homepage of the site. it works fine just need it reload different banner on page reload https://paidtoclick.ca

Really thanks in advance.

Second banner code...

<script type='text/javascript'>
var imgs2 = new Array('https://paidtoclick.ca/bann/z1.gif','https://paidtoclick.ca/bann/Survi.gif','https://paidtoclick.ca/bann/hg3.gif','https://paidtoclick.ca/bann/z2.gif','https://paidtoclick.ca/bann/hg4.gif','https://paidtoclick.ca/bann/z3.gif','https://paidtoclick.ca/bann/z4.gif','https://paidtoclick.ca/bann/zoom.gif','https://paidtoclick.ca/bann/z5.gif','https://paidtoclick.ca/bann/hg5.gif','https://paidtoclick.ca/bann/z6.gif','https://paidtoclick.ca/bann/SLS.gif','https://paidtoclick.ca/bann/z7.gif');
var lnks2 = new Array('https://www.zazzle.com/?rf=238005296547767598','http://coolhandpoker.com','https://hostgator.com','https://www.zazzle.com/?rf=238005296547767598','https://hostgator.com','https://www.zazzle.com/?rf=238005296547767598','https://www.zazzle.com/?rf=238005296547767598','http://www.aircraftinteriorsexpo.com','https://www.zazzle.com/?rf=238005296547767598','https://hostgator.com','https://www.zazzle.com/?rf=238005296547767598','http://www.silvalifesystem.com','https://www.zazzle.com/?rf=238005296547767598');
var alt2 = new Array('Featured Weekly Banner','Featured Weekly Banner','Featured Weekly Banner');
var currentAd2 = 0;
var imgCt2 = 13;
function cycle2() {
if (currentAd2 == imgCt2) {
currentAd2 = 0;
}
var banner2 = document.getElementById('adBanner2');
var link2 = document.getElementById('adLink2');
banner2.src=imgs2[currentAd2]
banner2.alt=alt2[currentAd2]
document.getElementById('adLink2').href=lnks2[currentAd2]
currentAd2++;
}
window.setInterval('cycle2()',19000);
</script>
<a href='https://www.zazzle.com/?rf=238005296547767598' id='adLink2' target='_top'>
<img src='https://paidtoclick.ca/bann/z1.gif' id='adBanner2' border='0' width='234' height'60'></a></div>

HERE IS THE ENTIRE CODE ON SITE.

<script type='text/javascript'>

window.onload = function(){
var imgs1 = new Array('https://paidtoclick.ca/bann/ani.gif','https://paidtoclick.ca/bann/247bux.gif','https://paidtoclick.ca/bann/brab.gif ','https://paidtoclick.ca/bann/CHP.gif','https://paidtoclick.ca/bann/Deft.gif','https://paidtoclick.ca/bann/heard.gif','https://paidtoclick.ca/bann/hg1.gif','https://paidtoclick.ca/bann/Hope.gif','https://paidtoclick.ca/bann/lon.jpg','https://paidtoclick.ca/bann/MZJ.gif','https://paidtoclick.ca/bann/oxj.gif','https://paidtoclick.ca/bann/play.jpg','https://paidtoclick.ca/bann/hg2.gif','https://paidtoclick.ca/bann/z8.gif');
var lnks1 = new Array('http://sendearnings.com','http://bucks247.com','http://www.aanbieding.nl','http://coolhandpoker.com','http://www.deftones.com','http://www.ciao.co.uk','https://hostgator.com','https://www.facebook.com/hopenhagen','http://www.thelongevitynowconference.com','http://www.metzonderjas.nl','http://www.oxfam.org.uk/oxjam','https://www.bricksandtoys.nl','https://www.hostgator.com','https://www.zazzle.com/?rf=238005296547767598');
var alt1 = new Array('Featured Weekly Banner','Featured Weekly Banner','Featured Weekly Banner');

var imgCt1 = 14;
var currentAd1 = Math.floor(Math.random() * imgCt1);
console.log(currentAd1);
function cycle1() {
currentAd1 = (currentAd1 + 1) % imgCt1;
console.log(currentAd1);
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
}
cycle1();
window.setInterval(cycle1,23000);
}
</script>
<a href='' id='adLink1' target='_top'>
<img src='' id='adBanner1' border='0' width='234' height'60'></a></div>


<div style='margin-left:-3px; margin-top:-4px;'><script type='text/javascript'>
window.onload = function(){
var imgs2 = new Array('https://paidtoclick.ca/bann/z1.gif','https://paidtoclick.ca/bann/Survi.gif','https://paidtoclick.ca/bann/hg3.gif','https://paidtoclick.ca/bann/z2.gif','https://paidtoclick.ca/bann/hg4.gif','https://paidtoclick.ca/bann/z3.gif','https://paidtoclick.ca/bann/z4.gif','https://paidtoclick.ca/bann/zoom.gif','https://paidtoclick.ca/bann/z5.gif','https://paidtoclick.ca/bann/hg5.gif','https://paidtoclick.ca/bann/z6.gif','https://paidtoclick.ca/bann/SLS.gif','https://paidtoclick.ca/bann/z7.gif');
var lnks2 = new Array('https://www.zazzle.com/?rf=238005296547767598','http://coolhandpoker.com','https://hostgator.com','https://www.zazzle.com/?rf=238005296547767598','https://hostgator.com','https://www.zazzle.com/?rf=238005296547767598','https://www.zazzle.com/?rf=238005296547767598','http://www.aircraftinteriorsexpo.com','https://www.zazzle.com/?rf=238005296547767598','https://hostgator.com','https://www.zazzle.com/?rf=238005296547767598','http://www.silvalifesystem.com','https://www.zazzle.com/?rf=238005296547767598');
var alt2 = new Array('Featured Weekly Banner','Featured Weekly Banner','Featured Weekly Banner');

var imgCt2 = 13;
var currentAd2 = Math.floor(Math.random() * imgCt2);
console.log(currentAd2);
function cycle2() {
currentAd2 = (currentAd2 + 1) % imgCt2;
console.log(currentAd2);
var banner2 = document.getElementById('adBanner2');
var link2 = document.getElementById('adLink2');
banner2.src=imgs2[currentAd2]
banner2.alt=alt2[currentAd2]
document.getElementById('adLink2').href=lnks2[currentAd2]
}
cycle2();
window.setInterval(cycle2,23000);
}
</script>
<a href='' id='adLink2' target='_top'>
<img src='' id='adBanner2' border='0' width='234' height'60'></a></div>
Solution

  • You should generate a random value for currentAd1 on the server, or change the js to this:

    var imgCt1 = 14;
var currentAd1 = Math.floor(Math.random() * imgCt1);
console.log(currentAd1);
function cycle1() {
    currentAd1 = (currentAd1 + 1) % imgCt1;
    console.log(currentAd1);
    var banner1 = document.getElementById('adBanner1');
    var link1 = document.getElementById('adLink1');
    banner1.src=imgs1[currentAd1]
    banner1.alt=alt1[currentAd1]
    document.getElementById('adLink1').href=lnks1[currentAd1]
}
cycle1();  //you need to execute this once when page loads to change the banner randomly
window.setInterval(cycle1,23000); // no need for 'cycle1()', can just be cycle1

    Fiddle: http://jsfiddle.net/ggQB6/6/

    The best way to do this though is to generate a random currentAd1 on the server and get rid of the first cycle1() call.