Javascript 更改html中的背景图像_Javascript_Html

Javascript 更改html中的背景图像

javascript html

Javascript 更改html中的背景图像,javascript,html,Javascript,Html,在文件夹中我有以下图片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

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

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

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

在不详细介绍如何改进代码（避免内联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>


变量
images=[“w1.jpg”、“w2.jpg”、“w3.jpg”]//图像列表
，imgToCHange=document.getElementById（'change me'）
，间隔=1000//，单位为毫秒
;
setInterval（函数（）{
images.unshift（images.pop（））；
imgToCHange.src=图像[0]；
}，间隔）；

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


更改图像（）；

不惜一切代价避免相当大的内联css块。另外，我不明白为什么你的图像是99%的宽度和高度？请注意，这个问题是误导性的-这不是CSS意义上的背景图像，它只是一个普通的图像元素。由于周围的元素，它可能会显示为背景，但事实并非如此。您应该添加在jquery中完成的操作。不是独立的javascript。它使用一个名为jquery的库如果你看他的css，他没有背景图像-他在一个div中有一个图像标签。由于页面布局的原因，它可能看起来像bg图像，但它不是t@fritzfromlondon是的，没错。但是，有没有理由不使用背景图像样式？您也可以仅使用div创建

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

<script>
change_image();
</script>