AllExperts > Experts 
Search      

Javascript

Volunteer
Answers to thousands of questions
 Home · More Questions · Answer Library  · Encyclopedia ·
More Javascript Answers
Question Library

Ask a question about Javascript
Volunteer
Experts of the Month
Expert Login

Awards

About Us
Tell friends
Link to Us
Disclaimer

 
 
 
 
About Anthony Levensalor
Experience
I have been programming in Java and Javascript since 1998. I run a web development company that specializes in Ajax front ends with PHP/MySQL back ends. I am a Sun Certified Java 2 Developer, and have done nothing but web applications for the last two years in my business

Past/Present clients
Monster.com, Compuware Corporation, Flextronics International, Pragmatech Software, Open Travel Software, The Loss Mitigation Institute, Raw Story Media, Page One News Media.

 
   

You are here:  Experts > Computing/Technology > Focus on JavaScript > Javascript > JS- cycle through images

Topic: Javascript


Expert: Anthony Levensalor
Date: 11/29/2007
Subject: JS- cycle through images

Question
Sorry, I forgot to send the script with my question. The original question was about writing a script to cycle through five different images continuously for a specific amount of time. I have been able to get it work by cycling through image 1 and 2, and repeating, or to go from image 1 to image 5, skipping 2, 3, and 4, and then stopping. What am I doing wrong?

<html>
<head>
<title>Banner Ads</title>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var image = new Array(5);
images[0].src = "adImage1.gif";
images[1].src = "adImage2.gif";
images[2].src = "adImage3.gif";
images[3].src = "adImage4.gif";
images[4].src = "adImage5.gif";

var curImage="";
var changeImages;
function adImage() {
        if (curImage == "adImage2") {
           document.images[0].src = "adImage1.gif";
           curImage = "adImage1";
        }
        else {
           document.images[0].src = "adImage2.gif";
           curImage = "adImage2";
        }
           if (curImage == "adImage3") {
              document.images[1].src = "adImage2.gif";
              curImage = "adImage2";
           }
           else {
              document.images[1].src = "adImage3.gif";
              curImage = "adImage3";
           }
              if (curImage == "adImage4") {
                    document.images[2].src = "adImage3.gif";
                 curImage = "adImage3";
                 }
              else {
                    document.images[2].src = "adImage4.gif";
                    curImage = "adImage4";
              }   
                     if (curImage == "adImage5") {
                        document.images[3].src = "adImage.gif4";
                        curImage = "adImage4";  
                     }
                     else {
                        document.images[3].src = "adImage5.gif";
                        curImage = "adImage5";
                     }
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body onload="var changeImages=setInterval('adImage()', 5000);">
<p>
<img src="adImage1.gif" height="60" width="468" alt="Changing Ad image" />
</p>
</body>
</html>

Answer
Ok, there was a lot here to comment on, so I went ahead and made an example for you, so you can read the comments and the like and give it a go.

The script I wrote I just uploaded to my site, you can view it in action at http://mypetprogrammer.com/allexperts/javascript/imagecycling_a.html

The source, all pretty and formatted like, is at http://mypetprogrammer.com/allexperts/javascript/cyclersource.html

Good luck, and if you need any further assistance, you know where to find me. :)

All the best,
~A!

Add to this Answer    Ask a Question



  Rate this Answer
   Was this answer helpful?
Not at allDefinitely              
   12345  

     
About Us | Advertise on This Site | User Agreement | Privacy Policy | Help
Copyright  © 2008 About, Inc. About and About.com are registered trademarks of About, Inc. The About logo is a trademark of About, Inc. All rights reserved.