Question

我正在尝试制作一个使用JavaScript循环显示3张图片的横幅在更改之前，每张图像应显示10秒钟。

我写了一些代码，但它没有用。它一直停留在第一张图像上。图像不会像我想要的那样改变。

您能在代码中看到任何内容并指出我的错误吗？

代码如下：

<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如下：

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

Answer 1

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

Answer 2

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对象设置为这个新值。

Answer 3

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

正文标记的onload属性中的代码未正确关闭
changeBanner中的代码将始终执行所有if语句，从不进行图像循环

无论修复如何，您都可以使代码更清晰，从body标签中删除内联脚本，并通过使用索引来跟踪集合中的当前图像来修复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的{{1}}属性。

使用body代替您可以分配一个在window.onload事件之后自动调用的函数，该函数在DOM准备好并且所有图像都已加载之后。

最好将所有脚本代码放在单独的load文件中，并且只在HTML中包含对它的引用。但是，为了简单起见，我确实接近你当前的方法。

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

.js

DEMO - 修复逻辑问题并使用<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>

Answer 4

在控制台中查看此内容;）

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

Answer 5

代码中的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>

如何循环显示一组图像？

5 个答案: