Why are the images are not cycling through, when using this JavaScript?

StackOverflow https://stackoverflow.com/questions/21497271

  •  05-10-2022
  •  | 
  •  

Question

I am trying to get 4 images to cycle, but none of the images show on the page.

Please can you tell me what I am doing wrong?

In <head>:

<script type="text/javascript">
    var currentImageIndex = -1,
        maxImageIndex = 0,
        images = [],
        changeInterval = 1500;

    // Prepares relevant variables to cycle throguh images
    var setUp = function () {

        images[0] = "cliff.jpg";
        images[1] = "nice.jpg";
        images[2] = "sea.jpg";
        images[3] = "umbrellas.jpg";

        maxImageIndex = images.length;
        currentImageIndex = 0;
    };

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

        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>

In <body>:

<div id="headerImages">
    <img src="/Images/cliff.jpg" alt="Cliff" title="Cliff" width="429" height="144" border="0" hidden />
    <img src="/Images/nice.jpg" alt="nice" title="nice" width="429" height="144" border="0" hidden />
    <img src="/Images/sea.jpg" alt="sea" title="sea" width="429" height="144" border="0" hidden />
    <img src="/Images/umbrellas.jpg" alt="umbrellas" title="umbrellas" width="429" height="144" border="0" hidden />
</div>

Thanks.

Was it helpful?

Solution

I had to replace:

images[0] = "cliff.jpg";
images[1] = "nice.jpg";
images[2] = "sea.jpg";
images[3] = "umbrellas.jpg";

with:

images = $('#headerImages img');

The full code is now:

    <script type="text/javascript">
        var currentImageIndex = -1,
            maxImageIndex = 0,
            images = [],
            changeInterval = 5000;

        // Prepares relevant variables to cycle through images
        var setUp = function () {
            images = $('#headerImages img');
            maxImageIndex = images.length;
            currentImageIndex = 0;
        };

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

            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>



    <div id="headerImages">
    <img src="/images/cliff.jpg" alt="Cliff" title="Cliff" width="429" height="144" border="0" hidden />
    <img src="/images/nice.jpg" alt="nice" title="nice" width="429" height="144" border="0" hidden />
    <img src="/images/sea.jpg" alt="sea" title="sea" width="429" height="144" border="0" hidden />
    <img src="/images/umbrellas.jpg" alt="umbrellas" title="umbrellas" width="429" height="144" border="0" hidden />
    </div>

OTHER TIPS

pseudo code:

// this should make your first image visible
var images = document.getElementById('headerImages');
images.children[0].style.visibility = 'visible' // or 'hidden'
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top