Member Avatar for willjohanz 
<html>
<head>
</head>
<body>
<img src="blue hills.jpg" name="slide" width="350" height="300"/>
<script type="text/javascript">
var image1=new Image()
image1.src="Sunset.jpg"
var image2=new Image()
image2.src="Winter.jpg"
var image3=new Image()
image3.src="Blue hills.jpg"
var image4=new Image()
image4.src="turf.jpg"
var image5=new Image()
image5.src="white.jpg"
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<5)
step++
else
step1
setTimeout("slideit()","1500")
}
slideit()
</script>
</body>
</html>
Edited by TrustyTony because: Moved to proper Javascript forum
  • 4 Contributors
  • 3 Replies
  • 358 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III

Recommended Answers

All 3 Replies

Member Avatar for NormR1

Try asking on an HTML forum. This one is for java programming.

Member Avatar for ckchaudhary

the javascript code is doing the following:
1. storing 5 images as variables
2. replaces an image with the said images every 1.5 seconds one by one

Member Avatar for Troy III

OK Here is some explaining of it:

var image1=new Image() //creating a DOM Image Element
image1.src="Sunset.jpg" //assigning the source & preloading the image file(s)...

var step=1 // creating a globally accessible counter variable;

if(!document.images) // checking for images coll., existence; duck-converting the find into Boolean (true / false)

return; // canceling the function if find turns false

document.images.slide.src=eval("image"+step+".src") // feeding the slide src attribute with the preloaded image loc., in steps.

if(step<5) step++ //checking if step var hasn't exceeded the max num., of images & incrementing by 1.

else step=1 //otherwise reset to starting value

setTimeout("slideit()","1500") // setting the timer of this function call

slideit() // initiating, actual function call

without spoiling the idea of the given approach completely, I would've rephrased it this way:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<img src="blue hills.jpg" name=slide width=350 height=300>

<script>
    onload=slideit;

    var src="sunset.jpg, winter.jpg, blue hills.jpg, turf.jpg, white.jpg".split(", "), images=[], step=0;
        for(x in src)images[x]=new Image, images[x].src=src[x];

    function slideit(){
            if(!document.images)return;
        document.images.slide.src=images[step].src;
            if(step<4)step++;
            else step=0;
        setTimeout(slideit,1500);
        }

    </script>
</body>
</html>
Edited by Troy III
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.