Random Banners

Hello

The following is my script for random banners. Each time the page is refreshed a banner changes randomly. Is there any way to have the script show the banners in order? Thank you.

Code:

$(function() {
var banners = [
'https://i62.servimg.com/u/f62/17/29/18/98/second10.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/nick_c10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/resize10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/final_14.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/final_11.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/annive10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/kezzpp10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/final10.jpg ',
'https://i62.servimg.com/u/f62/19/79/88/05/final10.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/banner11.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/ipaegu10.jpg',
'https://i37.servimg.com/u/f37/17/29/18/98/trjutb10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/3rd_an10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/engage10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/bachel11.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/pvars910.jpg',
'https://i62.servimg.com/u/f62/16/31/92/16/7de86d10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/sharle10.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/zfveaz10.jpg',
'http://www.bilder-upload.eu/upload/56a4c9-1516330129.png',
'https://i62.servimg.com/u/f62/19/79/88/05/final_12.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/5hrx9a10.jpg',
'https://i62.servimg.com/u/f62/16/31/92/16/5c9f6010.png'


],

logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo');
if (logo) (logo.tagName == 'IMG' ? logo : logo.firstChild).src = banners[Math.floor(Math.random() * banners.length)];
});
;

If you do that, it would not be random.

Correct. I want them to appear in the same order they are listed.

Is not math.floor used to round down a number?

Hi @Guardian-Angel

Try this one. I took this code from a tutorial of the Spanish support forum of Forumotion. I have translated all the explanations but take into account that if you see some parts of the code in Spanish, it is for that and you don't have to worry about it because it will work regardless

Code:

$(function(){   
  var banner = new Array();
 
//########################## EDITABLE ZONE ##################################
  var segundosDesfile = 5; //How many seconds each banner lasts
  var random = false; //Change to "true" if you want the banners to appear randomly
  var speedTransition = "slow"; //You can change to "fast" the effect of the transition
 
  banner[0] = "URL_LOGO_1";
  banner[1] = "URL_LOGO_2";
  banner[2] = "URL_LOGO_3";
  //You can add more...
//########################## END EDITABLE ZONE #############################
 
  var i_act = 0;
  var sel = "img#i_logo, a#logo img, a#pun-logo img";
  $(sel).attr("src", banner[random ? Math.floor(Math.random() * banner.length) : i_act]);
  setInterval(function() { 
      $(sel).fadeOut(speedTransition,function(){
        $(sel).load(function(){
            $(sel).fadeIn();
        });
        $(sel).attr("src", banner[random ? Math.floor(Math.random() * banner.length) : ++i_act]);
      }); 
      if(!random && i_act == banner.length-1) i_act = -1;
  }, segundosDesfile * 1000); 
});

Best regards

@mpelmmc
I think the member wants the banner to only change when you refresh the page or go to the next page,

Thank you for clarifying, @APE. I must have misunderstood.

Then, instead of the code I gave above, try with this one:

Code:

$(function(){   
var banner = new Array();

    banner[0]="URL-BANNER-1";
    banner[1]="URL-BANNER-2";
    banner[2]="URL-BANNER-3";

    document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
});

@mpelmmc That's still random.

Try this:

Code:

$(function() {
var banners = [
'https://i62.servimg.com/u/f62/17/29/18/98/second10.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/nick_c10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/resize10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/final_14.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/final_11.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/annive10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/kezzpp10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/final10.jpg ',
'https://i62.servimg.com/u/f62/19/79/88/05/final10.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/banner11.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/ipaegu10.jpg',
'https://i37.servimg.com/u/f37/17/29/18/98/trjutb10.jpg',
'https://i62.servimg.com/u/f62/17/29/18/98/3rd_an10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/engage10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/bachel11.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/pvars910.jpg',
'https://i62.servimg.com/u/f62/16/31/92/16/7de86d10.jpg',
'https://i11.servimg.com/u/f11/17/29/18/98/sharle10.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/zfveaz10.jpg',
'http://www.bilder-upload.eu/upload/56a4c9-1516330129.png',
'https://i62.servimg.com/u/f62/19/79/88/05/final_12.jpg',
'https://i62.servimg.com/u/f62/19/79/88/05/5hrx9a10.jpg',
'https://i62.servimg.com/u/f62/16/31/92/16/5c9f6010.png'
],

  logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo');
  if (logo) {
    var banner_index = -1;
    if (localStorage.banner_index) banner_index = localStorage.banner_index;
    banner_index = (banner_index + 1) % banners.length;
    localStorage.banner_index = banner_index;
    (logo.tagName == 'IMG' ? logo : logo.firstChild).src = banners[banner_index];
  }
});

Thank you so much everyone. The scripts posted upthread, didn't work.

I found the Slide Show Banner thread so I tried that one. It's exactly what I needed. It's so much easier for the banners to go in order for our forum because we update different banners according to what's airing on TV. This makes it easier to keep track of them all when I have to delete one link and replace it with an updated one, I have them numbered and named, so I know which is which.

Thanks again, topic solved.

Ange Tuteur - Banner Slide Show Thread.