We help IT Professionals succeed at work.

animated image slideshow

unnameduser
unnameduser asked
on
I am messing around with a javascript slideshow and want to animate it.  What code should i add to the  following


<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="image2.jpg"
var image3=new Image()
image3.src="image3.jpg"
var image4=new Image()
image4.src="image4.jpg"
var image5=new Image()
image5.src="image5.jpg"
var image6=new Image()
image6.src="image6.jpg"
var image7=new Image()
image7.src="image7.jpg"
var image8=new Image()
image8.src="image8.gif"

//-->
</script>
</head>
<body>
<body>
<img src="image1.jpg" name="slide" width=650 height=300>
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<8)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="#"
else if (whichimage==2)
window.location="#"
else if (whichimage==3)
window.location="#"
}

//-->
</script>
</body>
</body>
</html>

Open in new window

Comment
Watch Question

Forgive me but after adding images it already animates?
Ian

Author

Commented:
I should have been more specific.  I want an transition effect such as fading in etc

Author

Commented:
will give it a go and report back
Ok cool well looking at both scripts i think the easiest thing todo would be to use document.write and then implement the "FadeInImage('emilyforegroundimg','emily01.jpg','emilybackgrounddiv')" into it or you could change and maybe use innerHTML and have different effects for your images by adding the "effects" to the image script.
All the best,
Ian
document.images.slide.src=eval("image"+step+".src") 
To this
document.open();
document.write("<p><img src='images/5.jpg' name='slide'><\/p>");
document.close();

Open in new window

How ya getting on?
Found this which may be more help http://slayeroffice.com/code/imageCrossFade/xfade2.html
Ian

Author

Commented:
With the links provided I got my solution