使用Javascript每隔几秒钟更改一次HTML页面中的图像

Change image in HTML page every few seconds using Javascript

本文关键字：图像 HTML 一次 钟更改 Javascript 使用 几秒      更新时间：2023-09-26

我有一个页面，我需要有3个图像，一个在另一个下面，我需要每10秒更改一次（例如：显示图像1-3，显示10秒后显示图像4-6，显示10秒钟后显示图像7-9，…，显示图像1-3）。

现在，我有一个代码，它只更改3个图像中的第一个。我怎么能让它在每10秒后一次更改所有3张图像？

下面是一个javascript示例：

<script>
        var links = ["http://www.example.com","http://www.def.com","http://www.ghi.com"];
        var images = ["http://www.example.com/img1.png", "http://www.example.com/img2.png", 
              "http://www.example.com/img3.png", "http://www.example.com/img4.png",
              "http://www.example.com/img5.png", "http://www.example.com/img6.png"
             ];
        var i = 0;
        var renew = setInterval(function(){
            if(links.length == i){
                i = 0;
            }
            else {
            document.getElementById("bannerImage").src = images[i]; 
            document.getElementById("bannerLink").href = links[i]; 
            i+=1;
        }
    },10000);
</script>

HTML代码：

<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img1.png" width="694" height="83" alt="some text">
</a>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img2.png" width="694" height="83" alt="some text">
</a>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img3.png" width="694" height="83" alt="some text">
</a>

---------------------------------------------------------------------------------------------------------------------------------编辑------------------------------------------------------------------------------------------------------------------------------------

请看一下下面的代码。我需要这样的东西：

<head>
<title>Test</title>
    <script>
        var links = ["http://www.example.com","http://www.example.com","http://www.example.com"];
        var images = [  "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
            "https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
                "https://upload.wikimedia.org/wikipedia/commons/9/90/Contoh.jpg",
                "https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg"
             ];
        var i = 0;
        var renew = setInterval(function(){
            if(links.length == i){
                i = 0;
            }
            else {
            document.getElementById("bannerImage").src = images[i]; 
            document.getElementById("bannerLink").href = links[i]; 
            i+=1;
        }
        },3000);
        </script>
</head>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg"  alt="some text">
</a></br>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" alt="some text">
</a></br>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg" alt="some text">
</a></br>
</body>

使用上面的代码，只有第一个图像发生了变化，第二个和第三个图像始终相同，但我也需要在10秒后更改它们（我需要做与图像1、图像2和图像3相同的事情）。

这个版本也有链接。试试这个JS FIDDLE

<a id='bannerLink1' href="#"><img src="" id='img1' ></a>
<a id='bannerLink2' href="#"><img src="" id='img2' ></a>
<a id='bannerLink3' href="#"><img src="" id='img3' ></a>
<script>
var images = ["http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG1&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG2&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG3&w=327&h=420",
              "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG4&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG5&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG6&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG7&w=327&h=420"
             ];
var links = ["http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG1&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG2&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG3&w=327&h=420",
              "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG4&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG5&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG6&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG7&w=327&h=420"
             ];
var i = 0;
var renew = setInterval(function(){
        if(i==images.length) i=0;
        document.getElementById("img1").src = images[i]; 
        document.getElementById("bannerLink1").href=links[i];
        if(i+1==images.length) i=-1;
        document.getElementById("img2").src = images[i+1];
        document.getElementById("bannerLink2").href=links[i+1];
        if(i+2==images.length) i=-2;
        document.getElementById("img3").src = images[i+2];
        document.getElementById("bannerLink3").href=links[i+2];
        i+=3;

},1000);
</script>

我设置了3秒的间隔和警报来显示不同的图像变化，所以请看一看，这可能会帮助你

<head>
<title>Test</title>
    <script>
    var images = ["img1.png","img2.png","img3.png"];
    function changeImage()
    {
        var i = 0;
        var inter = setInterval(function(){
            if(i < images.length)
            {
                //document.getElementById("bannerImage").src = images[i];
                alert(images[i]);
                i++;
            }
            else
            {
                i = 0;
                //document.getElementById("bannerImage").src = images[i];
                alert(images[i]);
                i++;
            }
        },3000);
    }
    </script>
</head>
<body onload="changeImage()">
</body>

setInterval(function(){
    functions here.
}, 10000);

更多信息请点击此处：http://www.w3schools.com/jsref/met_win_setinterval.asp

相关文章：