Home/ Questions/Q 6624471
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:39:28+00:00

My code is very self explanatory. It is suppose to, after the page loads

  • 0

My code is very self explanatory. It is suppose to, after the page loads all necessary images, start looping through the same 5 images for the banner, with a 5 second delay in between. But, it doesn’t do anything when the page loads.

<script type="text/javascript">
var counter = 0;
var bannerList = new Array();
bannerList[0] = "/portfolio/1.jpg"
bannerList[1] = "/portfolio/2.jpg"
bannerList[2] = "/portfolio/3.jpg"
bannerList[3] = "/portfolio/4.jpg"
bannerList[4] = "/portfolio/5.jpg"

function bannerRotator(){
    if(counter > 4){
        counter = 0;
    }
    document.getElementById("slide").src = bannerList[counter];
    counter = counter + 1;
    var t=setTimeout("bannerRotator()", 2000);
}
</script>

Along with:

<body onLoad="bannerRotator();">

Can anyone see where I’m going wrong? Thanks for any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    while (counter <= 4){
    var t=setTimeout("changeImage(bannerList[counter])", 5000);
    counter = counter + 1;

    if (counter > 4){
        counter = 0;
    }
}

    that, my friend, is an infinite loop and is always suspect… it will never reach 5. the reason why it crashes (at least for me) is because it doesn’t wait for the timeout to end before it loops again. You might consider using something like this:

    Also, you can’t pass parameters as a string (e.g. the “changeImage(bannerList[counter])”). You need to concatenate like so:

    var t=setTimeout("changeImage('"+bannerList[counter]+"')", 1000);

    Then to actually make it loop, you want to put another call to the timeout inside the changeImage function (so it does it after the time and not all five at the same time). This will mean that both counter and bannerList need to be global. Then with a little js monkey business you get the following version:

    var counter = 0;
var bannerList = new Array();

function bannerRotator(){
    bannerList[0] = "portfolio/1.jpg"
    bannerList[1] = "portfolio/2.jpg"
    bannerList[2] = "portfolio/3.jpg"
    bannerList[3] = "portfolio/4.jpg"
    bannerList[4] = "portfolio/5.jpg"


    var t=setTimeout("changeImage('"+bannerList[counter]+"')", 1000);

}
function changeImage(newImgLoc){
    document.getElementById("slide").src = newImgLoc;
    setTimeout("changeImage('"+bannerList[++counter%bannerList.length]+"')", 1000);
}

    You can see a demo here: Demo

    if you want to actually see images changing, you’ll need to plug their absolute paths.

    • 0