Hi, new to this website but I am just not getting what I am doing wrong on this. The assignment is that the page should have a cycling banner on the top third of the page, a random image banner in the middle third and a javascript slideshow on the bottom 3rd. Here is what I have...and individually the banners work fine but when I put them all together in one html file and only the last one works right. Any help is greatly appreciated...I am just not understanding this.
<html>
<head>
<title>HTML and Javascript</title>
<script>
var my_imgs = new Array(4);
var index = 0;
function cycle()
{
document.banner1.src = my_imgs[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
function startup()
{
my_imgs[0] = new Image;
my_imgs[0].src = "lions.gif";
my_imgs[1] = new Image;
my_imgs[1].src = "tigers.gif";
my_imgs[2] = new Image;
my_imgs[2].src = "bears.gif";
my_imgs[3] = new Image;
my_imgs[3].src = "ohmy.gif";
cycle();
return;
}
var img_arr = new Array(4);
var index = 0;
function select ()
{
index = Math.floor(Math.random() * 4);
document.random.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}
function startup()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}
var imgArray = new Array(4);
var index = 0;
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
</script>
</head>
</body>
<body onLoad="startup()">
<div align="center">
<img name="banner1" src="lions.gif">
</div>
<p>
</p>
<body onLoad="startup()">
<div align="center">
<img name="random" src="lions.gif">
</div>
<p>
</p>
<body onLoad="startup()">
<div align="center">
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
Full Version: Need Help with a Class plz (scripting banners)
You have three startup() functions in the script. Logically, only the last one will work. You need to rename two of them.
And, you have three <body onLoad="startup()">. There can only be one BODY tag per page. Then you can put all three function calls in the onload attribute by separating them by a semi-colon ( ; ). See also http://www.javascriptkit.com/javatutors/multiplejava.shtml .
And, you have three <body onLoad="startup()">. There can only be one BODY tag per page. Then you can put all three function calls in the onload attribute by separating them by a semi-colon ( ; ). See also http://www.javascriptkit.com/javatutors/multiplejava.shtml .
thanks Frederiek....when I change the name of two of the startup functions is there something I have to name them or can I rename them anything? Like one as startup() one as alpha() one as delta() ?
then I would do the body onLoad like this (with just one body onload on the page):
<body onLoad="startup(); alpha(); delta()">
Am I understanding that correctly? Thank you sooo much for helping!
then I would do the body onLoad like this (with just one body onload on the page):
<body onLoad="startup(); alpha(); delta()">
Am I understanding that correctly? Thank you sooo much for helping!
Yes.
I changed it to this...but now only the top one works correctly. The one I called cycleban works correctly, the banner1 and slideshow just show the first img of "lions"...what am I missing? thanks!
<html>
<head>
<title>HTML and Javascript</title>
<!------------SCRIPT 1------------->
<script>
var my_img = new Array(4);
var index = 0;
function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle();
return;
}
</script>
<!-------END SCRIPT 1-------->
<!--------SCRIPT 2----------->
<script>
var img_arr = new Array(4);
var index = 0;
function select ()
{
index = Math.floor(Math.random() * 4);
document.banner.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}
function beta()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}
</script>
<!----------END SCRIPT 2------------>
<!---------SCRIPT 3------------->
<script>
var imgArray = new Array(4);
var index = 0;
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
function omega()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
select();
return;
}
</script>
<!---------END SCRIPT 3--------->
</head>
<body onLoad="alpha();beta();omega()">
<div align="center">
<p>
<img name="cycleban" src="lions.gif">
</p>
<p>
<img name="banner" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
<html>
<head>
<title>HTML and Javascript</title>
<!------------SCRIPT 1------------->
<script>
var my_img = new Array(4);
var index = 0;
function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle();
return;
}
</script>
<!-------END SCRIPT 1-------->
<!--------SCRIPT 2----------->
<script>
var img_arr = new Array(4);
var index = 0;
function select ()
{
index = Math.floor(Math.random() * 4);
document.banner.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}
function beta()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}
</script>
<!----------END SCRIPT 2------------>
<!---------SCRIPT 3------------->
<script>
var imgArray = new Array(4);
var index = 0;
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
function omega()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
select();
return;
}
</script>
<!---------END SCRIPT 3--------->
</head>
<body onLoad="alpha();beta();omega()">
<div align="center">
<p>
<img name="cycleban" src="lions.gif">
</p>
<p>
<img name="banner" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
Replace:
CODE
<body onLoad="alpha()";"beta()";"omega()">
with:CODE
<body onLoad="alpha();beta();omega()">
ok, did that Darin..and now the top two are changing..but they are both changing on the random pattern for some reason (which should only be the second set that changes randomly)...and the bottom one doesn't change at all. This is making me crazy!! LOL!
Really really appreciate the help...I am trying so hard to GET this!
Really really appreciate the help...I am trying so hard to GET this!
I think... the omega function works but it changes the second image (again). Both the beta and the omega functions call the select function and that function changes the image with the name "banner". And now I got a headache. 
oh...yeah...I see what you are saying...they both have select() at the end of the image array strings.....how do I work around that? And any idea why the cycle function on the alpha isn't working? it's changing to whatever random image beta (the second script) is generating.
Sorry for your headache...I feel your pain..I've had one for DAYS trying to understand this! LOL!
The first banner (alpha) should change images in a cycle that says "lions" "and tigers" "and bears" "oh my!" (in that order)
The second banner (beta) should randomly choose 1 of the same four images
The third should be a slideshow that moves forward or backward in order (again using the same four images) when the next or back is clicked. I have them all moving now...they are just all moving randomly.
also, part of the instructions are
1) use different names for your two banner images (which I did with "cycleban" and "banner", right?)
2) Use different names for your three array index variables (which I think I did by using my_img for alpha, img_arr for beta, and ImgArray for omega, right?)
Sorry for your headache...I feel your pain..I've had one for DAYS trying to understand this! LOL!
The first banner (alpha) should change images in a cycle that says "lions" "and tigers" "and bears" "oh my!" (in that order)
The second banner (beta) should randomly choose 1 of the same four images
The third should be a slideshow that moves forward or backward in order (again using the same four images) when the next or back is clicked. I have them all moving now...they are just all moving randomly.
also, part of the instructions are
1) use different names for your two banner images (which I did with "cycleban" and "banner", right?)
2) Use different names for your three array index variables (which I think I did by using my_img for alpha, img_arr for beta, and ImgArray for omega, right?)
BTW you don't need to use several script blocks and somewhat meaningful names for functions and just about everything helps when trying to untangle things and see what's connected to what. 
To make the HTML kosher you need to use type attribute for SCRIPT.
http://htmlhelp.com/reference/html40/special/script.html
To make the HTML kosher you need to use type attribute for SCRIPT.
http://htmlhelp.com/reference/html40/special/script.html
QUOTE
And any idea why the cycle function on the alpha isn't working?
I can be wrong here, and I'm not sure how to write it, but I think the result of cycle() is returned to alpha() only the first time. Or rather the problem is that alpha() is called only once. After that cycle() keeps running on its own, to no use. I think.
You can see it keeps changing the value of index if you insert an alert like this.
CODE
function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
alert(index);
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
{
document.cycleban.src = my_img[index].src;
index++;
alert(index);
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
Yeppers. Remove the setTimeout() from the cycle() function and have alpha() keep calling itself instead.
I'm not sure if return is needed or used right, but since it was there I kept it in. I have a problem with return and am seldom sure of where, how and when to use it.
CODE
function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle();
setTimeout("alpha()", 2000);
return;
}
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle();
setTimeout("alpha()", 2000);
return;
}
I'm not sure if return is needed or used right, but since it was there I kept it in. I have a problem with return and am seldom sure of where, how and when to use it.
Here's what I have now:
<html>
<head>
<title>HTML and Javascript</title>
<script>
var my_img = new Array(4);
var index= 0;
function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle()
return;
}
var img_arr = new Array(4);
var index = 0;
function select ()
{
index = Math.floor(Math.random() * 4);
document.random.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}
function beta()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}
var imgArray = new Array(4);
var index = 0;
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
function omega()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
</script>
</head>
<body onLoad="alpha();beta();omega()">
<div align="center">
<p>
<img name="cycleban" src="lions.gif">
</p>
<p>
<img name="random" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
the first script code (alpha) should change the banner images in order "lions" "and tigers" "and bears" "oh my"
the second script code (beta) should change the banner images (using the same four images as above) randomly
the third script code (omega) should move through the images in order when you click next, or backwards when you click back.
However, as the page is written now alpha and beta both change randomly and omega changes to a random image when you click next or back.
BTW....I removed the select() from the omega script array part...it wasn't supposed to be there...typing error on my part. sorry
<html>
<head>
<title>HTML and Javascript</title>
<script>
var my_img = new Array(4);
var index= 0;
function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle()
return;
}
var img_arr = new Array(4);
var index = 0;
function select ()
{
index = Math.floor(Math.random() * 4);
document.random.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}
function beta()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}
var imgArray = new Array(4);
var index = 0;
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
function omega()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
</script>
</head>
<body onLoad="alpha();beta();omega()">
<div align="center">
<p>
<img name="cycleban" src="lions.gif">
</p>
<p>
<img name="random" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
the first script code (alpha) should change the banner images in order "lions" "and tigers" "and bears" "oh my"
the second script code (beta) should change the banner images (using the same four images as above) randomly
the third script code (omega) should move through the images in order when you click next, or backwards when you click back.
However, as the page is written now alpha and beta both change randomly and omega changes to a random image when you click next or back.
BTW....I removed the select() from the omega script array part...it wasn't supposed to be there...typing error on my part.
sorry
You still have the setTimeout() in the cycle() function.
it doesn't change anything when I do change it though..it's still just randomly changing both alpha and omega (even when I remove the setTimeout() from the cycle() function and put it in the alpha() function.
I even tried moving the setTimeout() from select() function on beta also..still didn't change the problem.
I even tried moving the setTimeout() from select() function on beta also..still didn't change the problem.
Does for me. The top image cycles trough the four images.
I even created dummy images just now to be sure. Alas the second image also cycles now. Maybe it did all the time. It's a little hard to check without actually seeing the images.
I even created dummy images just now to be sure. Alas the second image also cycles now. Maybe it did all the time. It's a little hard to check without actually seeing the images.
here are the four images:
I've already tried with the images I created (which are remarkably alike yours BTW 
).
).
Ok...got a reply from the teacher (this is an online course so getting help isn't so simple).
Here's what he said to do:
how to do it:
load the array once
select images by:
randomly select on using a random index from the loaded array.
select in order from the loaded array
select based on mouse click
do not need to load the array for each function.
Based on that...I did this..but it's still not working right. I can't--for the life of me--figure out why I am having so much trouble with this particular chapter. Instructions also say use different names for your banner images (which I have done) and use different names for your three array index variables (which I have confused myself so much now I'm not even sure what that means??)
<html>
<head>
<title>HTML and Javascript</title>
<script>
var imgArray = new Array(4);
var index= 0;
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
function select()
{
index = Math.floor(Math.random() * 4);
document.random.src = imgArray[index].src;
setTimeout("select()", 2000);
return;
}
function cycle()
{
document.cycling.src = imgArray[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
</script>
<body onLoad="startup();select();cycle();doBack();doNext">
<div align="center">
<p>
<img name="random" src="lions.gif">
</p>
<p>
<img name="cycling" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
Here's what he said to do:
how to do it:
load the array once
select images by:
randomly select on using a random index from the loaded array.
select in order from the loaded array
select based on mouse click
do not need to load the array for each function.
Based on that...I did this..but it's still not working right. I can't--for the life of me--figure out why I am having so much trouble with this particular chapter.
Instructions also say use different names for your banner images (which I have done) and use different names for your three array index variables (which I have confused myself so much now I'm not even sure what that means??)<html>
<head>
<title>HTML and Javascript</title>
<script>
var imgArray = new Array(4);
var index= 0;
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
function select()
{
index = Math.floor(Math.random() * 4);
document.random.src = imgArray[index].src;
setTimeout("select()", 2000);
return;
}
function cycle()
{
document.cycling.src = imgArray[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
</script>
<body onLoad="startup();select();cycle();doBack();doNext">
<div align="center">
<p>
<img name="random" src="lions.gif">
</p>
<p>
<img name="cycling" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
I get the same as with the old page I changed. The two first images cycle. The third shows a different image when the page is reloaded.
oh my gosh...I finally got it to work! Thank you so much for your help pandy!!!
Let's see then! 
I had to give the variable index different names to make them all work correctly (I just called them index1, index2, and index3) and then called all the functions in the onLoad.
Thank you again for all your assistance!!!
<html>
<head>
<title>HTML and Javascript</title>
<script>
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
var imgArray = new Array(4)
var index1= 0;
function select()
{
index1 = Math.floor(Math.random() * 4);
document.random.src = imgArray[index1].src;
setTimeout("select()", 2000);
return;
}
var imgArray = new Array(4)
var index2= 0
function cycle()
{
document.cycling.src = imgArray[index2].src;
index2++;
if (index2 > 3)
{
index2 =0;
}
setTimeout("cycle()", 2000);
return;
}
var imgArray = new Array(4)
var index3=0
function doBack()
{
if (index3 > 0)
{
index3--;
document.slideshow.src = imgArray[index3].src;
}
return;
}
function doNext()
{
if (index3 < 3)
{
index3++;
document.slideshow.src = imgArray[index3].src;
}
return;
}
</script>
<body onLoad="startup();select();cycle();doBack();doNext()">
<div align="center">
<p>
<img name="random" src="lions.gif">
</p>
<p>
<img name="cycling" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
Thank you again for all your assistance!!!
<html>
<head>
<title>HTML and Javascript</title>
<script>
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
var imgArray = new Array(4)
var index1= 0;
function select()
{
index1 = Math.floor(Math.random() * 4);
document.random.src = imgArray[index1].src;
setTimeout("select()", 2000);
return;
}
var imgArray = new Array(4)
var index2= 0
function cycle()
{
document.cycling.src = imgArray[index2].src;
index2++;
if (index2 > 3)
{
index2 =0;
}
setTimeout("cycle()", 2000);
return;
}
var imgArray = new Array(4)
var index3=0
function doBack()
{
if (index3 > 0)
{
index3--;
document.slideshow.src = imgArray[index3].src;
}
return;
}
function doNext()
{
if (index3 < 3)
{
index3++;
document.slideshow.src = imgArray[index3].src;
}
return;
}
</script>
<body onLoad="startup();select();cycle();doBack();doNext()">
<div align="center">
<p>
<img name="random" src="lions.gif">
</p>
<p>
<img name="cycling" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>
</html>
OK. I don't think I helped very much, but you are welcome anyway.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.