0

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

4

3 回答 3

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 + "')";
于 2012-07-14T09:10:54.983 回答
1

您必须定义图像 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>
于 2012-07-14T09:23:02.210 回答
0

好吧，无需详细说明如何改进代码（避免内联 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>
于 2012-07-14T09:13:06.633 回答