Please Help with my Javascript...

BWind · #1 (**permalink**) 08-17-10, 08:48 AM

I need help with this code. When the rotator has 10 it rotates all images great. When I added the 11th it will not rotate the 11th image but still will rotate the first 10.

HTML Code:

<br>
<script type="text/javascript">
var imgs1 = new Array("/resource/resmgr/Ad_Banner/ad16.jpg","/resource/resmgr/Ad_Banner/ad13.jpg","/resource/resmgr/Ad_Banner/ad14.jpg","/resource/resmgr/Ad_Banner/ad8.jpg","/resource/resmgr/Ad_Banner/ad15.jpg","/resource/resmgr/Ad_Banner/ad18.jpg","/resource/resmgr/Ad_Banner/ad12.jpg","/resource/resmgr/Ad_Banner/ad19.jpg","/resource/resmgr/Ad_Banner/ad20.jpg","/resource/resmgr/Ad_Banner/ad21.jpg","/resource/resmgr/Ad_Banner/ad21.jpg","/resource/resmgr/ad_Banner/ad3.jpg");
var lnks1 = new Array("http://www.adamscollision.com","http://www.huntleyrealty.com","http://www.trinitycpraed.com","http://www.sccah.com/?page=SCFestival","http://www.blazekshomefurnishings.hdspd.com","http://www.sccah.com/?page=JB_Const","http://tgconsultantsinc.com/","http://blueskiespilotshop.com/index.html ","http://www.aaaglass.com/ ","http://www.carytravelexpress.com/","http://www.sccah.com/?page=Ad_Inquiry ");
var alt1 = new Array("Adams Collision","Huntley Realty","Trinity","Sun City Arizona","Hunter Douglas Window Coverings and Custom Draperies","J&B Construction","TGI Consulting","Blue Skies","AAA Glass","Cary Travel Express","THIS COULD BE YOUR AD!!!");
var currentAd1 = 0;
var imgCt1 = 11;
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()",4000);
</script>
<a href=""http://www.adamscollision.com"" id="adLink1" target="_blank">
<img src="/resource/resmgr/Ad_Banner/ad16.jpg" id="adBanner1" border="0" width="170" height="200"></a>

job0107 · #2 (**permalink**) 08-18-10, 04:52 PM

There is really nothing wrong with your code except your first banner is being displayed for 8 seconds instead of 4 seconds.

Instead of displaying the first banner and then calling the first banner again after 4 seconds using setInterval(),
call the first banner right away and then use setTimeout() within the function to call itself after 4 seconds.
That way the first banner will be displayed for only 4 seconds.

I also added some checks to make sure you have your arrays balanced.
Run the code and you will see why your images aren't being rotated properly.
I rearranged your arrays so they are more easily readable.
You will probably notice right away what the problem is before your run the code.

HTML Code:

<html>
<head>
<script type="text/javascript">
var imgs1 = new Array(
                      "/resource/resmgr/Ad_Banner/ad16.jpg",
                      "/resource/resmgr/Ad_Banner/ad13.jpg",
                      "/resource/resmgr/Ad_Banner/ad14.jpg",
                      "/resource/resmgr/Ad_Banner/ad8.jpg",
                      "/resource/resmgr/Ad_Banner/ad15.jpg",
                      "/resource/resmgr/Ad_Banner/ad18.jpg",
                      "/resource/resmgr/Ad_Banner/ad12.jpg",
                      "/resource/resmgr/Ad_Banner/ad19.jpg",
                      "/resource/resmgr/Ad_Banner/ad20.jpg",
                      "/resource/resmgr/Ad_Banner/ad21.jpg",
                      "/resource/resmgr/Ad_Banner/ad21.jpg",
                      "/resource/resmgr/ad_Banner/ad3.jpg"
                      );
var lnks1 = new Array(
                      "http://www.adamscollision.com",
                      "http://www.huntleyrealty.com",
                      "http://www.trinitycpraed.com",
                      "http://www.sccah.com/?page=SCFestival",
                      "http://www.blazekshomefurnishings.hdspd.com",
                      "http://www.sccah.com/?page=JB_Const",
                      "http://tgconsultantsinc.com/",
                      "http://blueskiespilotshop.com/index.html",
                      "http://www.aaaglass.com/",
                      "http://www.carytravelexpress.com/",
                      "http://www.sccah.com/?page=Ad_Inquiry"
                      );
var alt1 = new Array(
                     "Adams Collision",
                     "Huntley Realty",
                     "Trinity",
                     "Sun City Arizona",
                     "Hunter Douglas Window Coverings and Custom Draperies",
                     "J&B Construction",
                     "TGI Consulting",
                     "Blue Skies",
                     "AAA Glass",
                     "Cary Travel Express",
                     "THIS COULD BE YOUR AD!!!"
                     );
var currentAd1 = 0, imgCt1 = 11, cycleBanner, msg = "", sw1 = sw2 = 1;
function cycle1()
{
 if(sw1)
 {
  if(imgs1.length != imgCt1){msg += "images length does not match. Should be " + imgCt1 + " is " + imgs1.length + ".\n"; sw2 = 0;}
  if(lnks1.length != imgCt1){msg += "links length does not match. Should be " + imgCt1 + " is " + lnks1.length + ".\n"; sw2 = 0;}
  if(alt1.length != imgCt1){msg += "alts length does not match. Should be " + imgCt1 + " is " + alt1.length + "."; sw2 = 0;}
  sw1 = 0;
  }
 if(sw2)
 {
  if(currentAd1 == imgCt1){currentAd1 = 0;}
  var banner1 = document.getElementById('adBanner1');
  var link1 = document.getElementById('adLink1');
  banner1.src=imgs1[currentAd1];
  banner1.alt=alt1[currentAd1];
  link1.href=lnks1[currentAd1];
  currentAd1++;
  cycleBanner = setTimeout("cycle1()",4000);
  }
 else
 {
  clearTimeout(cycleBanner);
  alert(msg);
  }
 }
</script>
</head>
<body onload="cycle1()">
<br />
<a href="http://www.adamscollision.com" id="adLink1" target="_blank"><img src="/resource/resmgr/Ad_Banner/ad16.jpg" id="adBanner1" border="0" alt="Adams Collision" width="170" height="200"></a>
</body>
</html>