使用此JavaScript时，为什么图像没有循环显示？

Question

我正在尝试使4张图像循环显示，但是页面上均未显示任何图像。

请您告诉我我做错了吗？

在<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>

在<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>

谢谢。

Answer 1

我不得不替换：

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

有：

images = $('#headerImages img');

现在完整的代码是：

    <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>

Answer 2

伪代码：

// this should make your first image visible
var images = document.getElementById('headerImages');
images.children[0].style.visibility = 'visible' // or 'hidden'

使用此JavaScript时，为什么图像没有循环显示？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-02-03 12:01:37

解决方案2
0 2014-02-01 11:19:31

使用此JavaScript时，为什么图像没有循环显示？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-02-03 12:01:37

解决方案2 0 2014-02-01 11:19:31

解决方案1
1 已采纳 2014-02-03 12:01:37

解决方案2
0 2014-02-01 11:19:31