Cycle through displayed images on a web page

45 pts.
Tags:
CSS
HTML
JavaScript
Hi.
I want to display 3 images in a container on a web page.
I want each image to highlighted in a rotating cycle (5 seconds or so) while all three images are still visible. The code below is what I have so far but this just cycles through the images displaying only 1 at a time. I would like all 3 images to be visible while focus moves from one to another. Any help/tips appreciated.
<!DOCTYPE html>
<html>

<head>
<style></style>

<script type="text/javascript">

        var currentImageIndex = -1,
        maxImageIndex = 0,
        images = [],
        changeInterval = 2000;

        // prepares relevant variables to cycle throguh images
        var setUp = function() {
        images = document.images;
        maxImageIndex = images.length;
        currentImageIndex = 0;
        };

        // changes the banner currently being displayed
        var changeBanner = function() {
        var i;

        // either re-set the index to 0 if the max length was reached or increase the index by 1
        currentImageIndex = (currentImageIndex >= maxImageIndex - 1) ? 0 : currentImageIndex += 1;

        for (i = 0; i < maxImageIndex; i += 1) {
            images[i].hidden = (i !== currentImageIndex);
        }
        };

    // a function which is triggered following the `load` event
    window.onload = function() {
        setUp();

        images[currentImageIndex].hidden = false; // show the first banner image;

        setInterval(changeBanner, changeInterval); // following a delay, keep changing the banner image by the specified interval
    };

</script>
</head>

<body>

  <div id="wrapper">
        <div>
            <img src="images/btnBusText.png" width="300px" height="150px" hidden />
            <img src="images/btnEssMed.png" width="300px" height="150px" hidden />
            <img src="images/btnEssSecEff.png" width="300px" height="150px" hidden />
        </div>
    </div>

</body>

</html>


Software/Hardware used:
HTML, CSS, Javascript

Answer Wiki

Thanks. We'll let you know when a new response is added.
Send me notifications when members answer or reply to this question.

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Discuss This Question:  

 
There was an error processing your information. Please try again later.
Thanks. We'll let you know when a new response is added.
Send me notifications when members answer or reply to this question.

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Forgot Password

No problem! Submit your e-mail address below. We'll send you an e-mail containing your password.

Your password has been sent to:

To follow this tag...

There was an error processing your information. Please try again later.

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Thanks! We'll email you when relevant content is added and updated.

Following