4

I'm trying to make a banner that cycles through 3 images using JavaScript.
Each image should be displayed for 10 seconds before changing.

I wrote some code but it is not working. It stays stuck on the first image. The Image does not change as I want it to.

Can you see anything in the code and point out my mistakes?

Code as follows:

<script type="text/javascript">
    function changeBanner(){
        var img = new array

        img[0] = document.images[0].src
        img[1] = document.images[1].src
        img[2] = document.images[2].src

        var currentimg = img[0]

        if(currentimg == img[0]) {
            currentimg = img[1]
        }

        if(currentimg == img[1]) {
            currentimg = img[2]
        }
    }
</script>

HTML as follows:

<body onload="var start=setInterval('changeBanner()', 10000;">
    <div id="wrapper">
        <div>
            <img src="budda.JPG" width="900px" height="300px" />
        </div>
...
4

5 回答 5

5 
var index = 0;

function changeBanner() {
    [].forEach.call(document.images, function(v, i) {
        document.images[i].hidden = i !== index
    });
    index = (index + 1) % document.images.length;
}
window.onload = function() {
    setInterval(changeBanner, 1000)
};

http://jsbin.com/emilef/2/edit

于 2013-04-14T10:08:13.683 回答
1

您的代码有几个功能问题：

  • body标签的onload属性中的代码没有正确关闭
  • changeBanner 中的代码将始终执行所有 if 语句，永远不会随着图像循环前进

无论修复如何，您都可以使代码更简洁，从正文标记中删除内联脚本，并通过使用索引来跟踪集合中的当前图像来修复 if 语句问题。

假设您有像您一样的 HTML，其中 3 张图片均以hidden：

<body>
    <div id="wrapper">
        <div>
            <img src="http://placehold.it/100x150" width="300px" height="150px" hidden />
            <img src="http://placehold.it/200x250" width="300px" height="150px" hidden />
            <img src="http://placehold.it/300x350" width="300px" height="150px" hidden />
        </div>
    </div>
</body>

您不需要onload使用body.

相反，您可以分配一个函数，该函数将window.onload在事件之后自动调用load，即在 DOM 准备好并加载所有图像之后。

最好将所有脚本代码放在一个单独的.js文件中，并且只在 HTML 中包含对它的引用。但是，为了简单起见，我确实与您当前的方法保持一致。

在该函数中，您可以设置变量，然后开始间隔，类似于：

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

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

演示- 修复逻辑问题并使用windows.onload()

于 2013-04-14T11:14:59.080 回答
1 
function changeBanner(){
var img = new array

img[0] = document.images[0].src
img[1] = document.images[1].src
img[2] = document.images[2].src

var currentimg = img[0]

现在currentimg是img[0]

if(currentimg == img[0]) {

这将是真的 currentimg = img[1] }

现在currentImg有价值img[1]

if(currentimg == img[1]) {

这也是真的

    currentimg = img[2]
}

currentImg具有价值img[2]

}

现在让我们忽略currentImg

您需要 1) 理清逻辑 2) 将某个 DOM 对象设置为这个新值。

于 2013-04-14T09:29:36.050 回答
0

在控制台中检查一下；）

var imgs=document.images;
function changeBanner(){
    var firstImgSrc = imgs[0].src + "";
    for(var i=0;i<imgs.length-1;i++){
        imgs[i].src=imgs[i+1].src+"";
    }
    imgs[imgs.length-1].src=firstImgSrc; //replace last image src with first one
}
var interval = setInterval(changeBanner, 5000);
于 2013-04-14T09:39:50.223 回答
0

您的setInterval('changeBanner()', 10000;代码中的 没有正确关闭，它在 10000 之后缺少“）”。它应该是：

setInterval('changeBanner()', 10000);

此外，setInterval 函数只会在加载主体时调用。因此，只需在您的 JavaScript 文件中添加该函数并将其链接到 html。像这样：

<script type="text/javascript">
function changeBanner(){
    var img = new array

    img[0] = document.images[0].src
    img[1] = document.images[1].src
    img[2] = document.images[2].src

    var currentimg = img[0]

    if(currentimg == img[0]) {
        currentimg = img[1]
    }

    if(currentimg == img[1]) {
        currentimg = img[2]
    }
}

  setInterval('changeBanner()', 10000);
</script>
于 2013-04-14T09:40:26.390 回答