Question

在文件夹中我有以下图片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函数，但是你能帮助理解我必须在我的代码中使用它吗？非常感谢

Answer 1

我认为你应该为此背景图像风格。这比在后台创建z-indexed 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 + "')";

Answer 2

您必须定义图片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>

Answer 3

没有详细介绍如何改进代码（避免使用内联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>

在html中更改背景图像

3 个答案: