Javascript Image Rotator Problems_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-07 13:27 出处：网络

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\'

相关专题：javascript

<script type="text/javascript">
var counter = 0;
var bannerList = new Array();
bannerList[0] = "/portf开发者_Python百科olio/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!

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.

you could use setInterval instead of setTimeout and use a simple modulo % to make it rotate. eg:

setInterval(function(){
    changeImage( bannerList[counter++ % bannerList.length]);
}, 5000);

The problem is that doing someElement.src = 'http://...'; doesn't do anything. It sets a property on the object someElement but it does not change the HTML attribute (it does for some attributes on some elements, e.g. someLink.href = or someInput.name =, but those are special cases). What you should be doing is using the setAttribute() method, e.g.:

var counter = 0;

function changeImage(newImgLoc){
  document.getElementById("slide").setAttribute('src', newImgLoc);
}

try

setTimeout("changeImage(bannerList[counter])", 5000);

instead of

var t=setTimeout("changeImage(bannerList[counter])", 5000);

so you output the function, now it sets it to a variable

//EDIT

<img id="slide" src="portfolio/4.jpg"> is your output in firebug it does change the pictures in your demo

try changing "onLoad" to "onload"... see if that helps

Javascript Image Rotator Problems

精彩评论

关注公众号

热门标签

图文推荐

Javascript Image Rotator Problems

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：