更改html中的背景图像

change background images in html

本文关键字：背景 图像 html 更改      更新时间：2023-09-26

在文件夹中，我有以下图像w1.jpg，w2.jpg…w7.jpg，现在我有了在我的html页面上显示w1.jpg的代码

<html>
<body >
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='w1.jpg' style='width:99%;height:99%' alt='[]' />
</div>
</body>
</html>

我想知道，如何编写脚本，在特定的时间间隔内将图像从w1.jpg更改为w7.jpg，正如我所知，javascript中使用了setInterval函数，但你能帮助我理解如何在代码中使用它吗？非常感谢

您必须定义图像id

var i=2;
function change_image()
{
    if(i==8)
    {
        i=1;
    }
    var img="w"+i+'.jpg'
    document.getElementById("img1").src=img;
    i++;
    setTimeout("change_image()",5000);
}

HTML代码

<img id="img1" src="w1.png" />

调用javascript函数，它将在5秒内更改图像

<script>
change_image();
</script>

我认为您应该为此设置背景图像样式。这比在后台创建z索引div要好得多。

然后通过javascript更改CSS（假设您使用jQuery选择body元素）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  var ii = 1;
  setInterval(function(){
    var image = "w" + ii + ".jpg";
    console.log(image);
    $("body").css("background-image", "url('" + image + "')");
    ii++;
  }, 1000);
</script>

当然，当最后一张图片出现时，你需要在正确的时间停下来。

从下面的评论中编辑：如果你不想使用jQuery（但我鼓励你熟悉它），你可以将以$符号开头的行更改为：

document.body.style.backgroundImage = "url('" + image + "')";

如果不深入了解如何改进代码的细节（避免内联css等），最简单的方法是给图像一个id，然后把它放在HTML页面的末尾

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img id="change-me" src='w1.jpg' style='width:99%;height:99%' alt='[]' />
 </div>
<script>
var
    images = [ "w1.jpg", "w2.jpg", "w3.jpg" ] //the list of images
  , imgToCHange = document.getElementById( 'change-me' )
  , interval = 1000 //in ms
  ;
setInterval( function(){
  images.unshift( images.pop() );
  imgToCHange.src = images[0];
 }, interval );
</script>
</body>
</html>
相关文章：