javascript 更改 html 中的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11482421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change background images in html
提问by dato datuashvili
in folder i have following images w1.jpg,w2.jpg...... w7.jpg, now i have this code for display w1.jpg on my html page
在文件夹中我有以下图片 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>
and i want to know,how to write script,which changes images from w1.jpg to w7.jpg in a specific interval,as i know for this there is used setInterval function in javascript,but could you help to understand how i have to use it in my code?thanks very much
我想知道，如何编写脚本，在特定的时间间隔内将图像从 w1.jpg 更改为 w7.jpg，因为我知道为此在 javascript 中使用了 setInterval 函数，但是您能否帮助了解我必须如何在我的代码中使用它？非常感谢
回答by Pavel S.
I think you should background-image style for this. This is much better way than creating z-indexed div on the background.
我认为您应该为此设置背景图像样式。这比在后台创建 z-indexed div 好得多。
Then change CSS by javascript (supposing you use jQuery for selecting body element):
然后通过 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>
Of course, you need to stop at the right time, when the last image comes.
当然，您需要在正确的时间停止，当最后一个图像出现时。
Edit from comment below: If you don't want to use jQuery (however I encourage you to get familiar with it), you can change the line starting with $symbol to:
从下面的评论中编辑：如果您不想使用 jQuery（但我鼓励您熟悉它），您可以将以$符号开头的行更改为：
document.body.style.backgroundImage = "url('" + image + "')";
回答by Hkachhia
You have compulsory define image id
您必须强制定义图像 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 Code
HTML代码
<img id="img1" src="w1.png" />
Call javascript function it will change image in 5 seconds
调用 javascript 函数，它会在 5 秒内改变图像
<script>
change_image();
</script>
回答by gotofritz
Well without getting into the details of how you could improve the code (avoid inline css, etc) the simplest way woud be to give the image an id, then put this this at the end of your HTML page
好吧，无需深入了解如何改进代码（避免内联 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>
