Javascript Image Rotator Problems
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] = "/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
加载中,请稍侯......
精彩评论