Click here to Skip to main content
11,639,463 members (68,706 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript HTML
I am using the following codes to swap images one after another but only the image mentioned in <img> tag is displayed. The images are not swaping as i want. please help me.

<html>
<head>
<script language="javascript">
(function(){
 var rotator=document.getElementById('rotator');
 var imageDir='';
 var delayInSeconds=2;
 var images=['2.jpg','3.jpg','4.jpg','5.jpg','4.jpg'];
 
 var num=0;
 var changeImage=function(){
    var len=images.length;
    rotator.src=imageDir+images[num++];
    if(num==len){
        num=0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
    })();
</script>
</head>
<body>
    <img src="4.jpg" alt="rotating image" width="700" height="600" id="rotator">
</body>
</html>
Posted 4-Oct-12 5:15am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You are trying to get a reference to the image element in your main closure, before the document has loaded.

If you move the var rotator=... line inside the changeImage function, it should work.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Suvendu Shekhar Giri 320
1 Sergey Alexandrovich Kryukov 283
2 Richard Deeming 200
3 CPallini 187
4 PIEBALDconsult 175
0 OriginalGriff 9,081
1 Sergey Alexandrovich Kryukov 8,812
2 Mika Wendelius 7,027
3 Suvendu Shekhar Giri 2,600
4 F-ES Sitecore 2,548


Advertise | Privacy | Mobile
Web03 | 2.8.150728.1 | Last Updated 4 Oct 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100