每隔几秒更改 HTML 页面中的图像

IT技术 javascript html image timer
2021-02-22 13:07:02

我想每隔几秒钟更改一次图像，这是我的代码：

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>change picture</title>
      <script type = "text/javascript">

    function changeImage()
    {
    var img = document.getElementById("img");
    img.src = images[x];
    x++;

    if(x >= images.length){
        x = 0;
    } 
   var timerid = setInterval(changeImage(), 1000);
}   }
var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";

      </script>
   </head>
   <body onload = "changeImage()">
 <img id="img" src="startpicture.jpg">
   </body>
</html>

我的问题是它卡在第一张图片上！

我还想尝试使用上一个和下一个按钮翻阅图片，但我不知道该怎么做。

6个回答

正如我在评论中发布的那样，您不需要同时使用setTimeout()and setInterval()，而且您也有语法错误（额外的一个}）。像这样更正你的代码：

（编辑添加两个功能以强制显示下一个/上一个图像）

<!DOCTYPE html>

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "image1.jpg";
          images[1] = "image2.jpg";
          images[2] = "image3.jpg";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="startpicture.jpg"/>
       <button type="button" onclick="displayPreviousImage()">Previous</button>
       <button type="button" onclick="displayNextImage()">Next</button>
   </body>
</html>
这是源代码中的错误（缺少function关键字），已修复。
2021-04-20 13:07:02
编辑后，只需添加两个按钮，您可以在其中触发 onclick 甚至调用 displayNextImage() 和 displayPreviousImage()。
2021-05-03 13:07:02
好的谢谢你成功了！！！！但我也想知道我是否可以添加一个网络和以前的来翻阅图像？？我不知道该怎么做
2021-05-10 13:07:02
啊！我仍然停留在同一张照片上！我的浏览器有问题吗？？
2021-05-14 13:07:02

下面将每 10 秒更改一次链接和横幅 

   <script>
        var links = ["http://www.abc.com","http://www.def.com","http://www.ghi.com"];
        var images = ["http://www.abc.com/1.gif","http://www.def.com/2.gif","http://www.ghi.com/3gif"];
        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++;

        }
        },10000);
        </script>



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

更改setTimeout("changeImage()", 30000);为setInterval("changeImage()", 30000);并删除var timerid = setInterval(changeImage, 30000);.

从帖子的当前编辑版本开始，您setInterval在每次更改结束时调用，为每个新迭代添加一个新的“更改器”。这意味着第一次运行后，其中一个在内存中滴答作响，运行 100 次后，100 个不同的转换器每秒更改图像 100 次，完全破坏性能并产生混乱的结果。

您只需要“准备”setInterval一次。将其从函数中移除并将其放置在内部onload而不是直接函数调用。

您可以在开始时加载图像并更改 css 属性以显示每个图像。

var images = array();
for( url in your_urls_array ){
   var img = document.createElement( "img" );
   //here the image attributes ( width, height, position, etc )
   images.push( img );
}

function player( position )
{
  images[position-1].style.display = "none" //be careful working with the first position
  images[position].style.display = "block";
  //reset position if needed
  timer = setTimeOut( "player( position )", time );
}
其它你可能感兴趣的问题
上一篇如何将 html 表格转换为具有多个工作表的 excel？ 下一篇javascript location.hash 在 IE 中刷新