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.

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.

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.

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

Following

Share this item with your network: