Javascript 如何循环浏览一组图像？_Javascript

Javascript 如何循环浏览一组图像？

javascript

Javascript 如何循环浏览一组图像？,javascript,Javascript,我正在尝试使用JavaScript制作一个横幅，在3个图像之间循环。更改前，每个图像应显示10秒钟我写了一些代码，但不起作用。它停留在第一个图像上。图像没有像我希望的那样改变你能看到代码中的任何东西并指出我的错误吗代码如下： <script type="text/javascript"> function changeBanner(){ var img = new array img[0] = document.images[0].s

我正在尝试使用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>

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


函数changeBanner（）{
var img=新数组
img[0]=document.images[0].src
img[1]=document.images[1].src
img[2]=document.images[2].src
var currentimg=img[0]
如果（当前img==img[0]）{
currentimg=img[1]
}
if（currentimg==img[1]）{
电流img=img[2]
}
}

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]
        }
    }
</script>

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

...

现在

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

在console中检查此项；）

var imgs=document.images；
函数changeBanner（）{
var firstImgSrc=imgs[0]。src+“”；
对于（var i=0；i代码中的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>


函数changeBanner（）{
var img=新数组
img[0]=document.images[0].src
img[1]=document.images[1].src
img[2]=document.images[2].src
var currentimg=img[0]
如果（当前img==img[0]）{
currentimg=img[1]
}
if（currentimg==img[1]）{
电流img=img[2]
}
}
setInterval（'changeBanner（）'，10000）；

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

body标记的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>


-修复逻辑问题并使用windows.onload（）

“它不起作用”…想更详细地描述一下吗？它怎么不起作用？请仔细检查您的语法。您对setInterval（）
的调用中至少缺少一个括号，您最好编写var img=[]；创建您的数组。抱歉没有说得更具体。它会停留在第一个图像上。图像不会按我的要求更改to@TimothyCoetzee正如Frederic所说，您有一些语法问题。您知道如何在浏览器上调试JS代码吗？我强烈建议您使用Chrome并查看调试控制台（只需在文档中的任意位置单击鼠标右键并选择“inspect element”）。从我在代码中看到的情况来看，您的文档中没有引用3个图像，因此会出现与此相关的错误。
<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>

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