用js怎么实现div背景图片变换？
问题如题描述：打开一个网页时，要是banner的图片不断自动变化，而图片设为了banner得背景图片了，请问怎么实现？恳请高手留下代码，谢谢了图片设为了banner的背景...
问题如题
描述：打开一个网页时，要是banner的图片不断自动变化，而图片设为了banner得背景图片了，请问怎么实现？
恳请高手留下代码，谢谢了
图片设为了banner的背景图片，即是div的一个属性，在代码中没有<img>的 展开
描述：打开一个网页时，要是banner的图片不断自动变化，而图片设为了banner得背景图片了，请问怎么实现？
恳请高手留下代码，谢谢了
图片设为了banner的背景图片，即是div的一个属性，在代码中没有<img>的 展开
5个回答
展开全部
代码写起来比较烦，首先如果是要自动变化的话，你首先需要有一个timer，调用window.setInterval(handler, time)方法去变换，可以写在onload事件里，或者卸载页面最后用<script><script>块里面
页面上有一个div的话，这个div里面应该有个<img>的吧，图片的话你用一个数组将文件名放起来，搞个随机数，然后就将img.src = 'arr[i]'；这样弄就应该能实现
页面上有一个div的话，这个div里面应该有个<img>的吧，图片的话你用一个数组将文件名放起来，搞个随机数，然后就将img.src = 'arr[i]'；这样弄就应该能实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
切换背景图，主要是修改背景的url：下面是一个小例子：
<body>
<div id="div1" style="width:100px; height:100px; background:"url(../1.png)"></div>
</body>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){
oDiv.style.background = 'url(../2.png)'; //直接切换背景色。
};
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 图片加载完毕后自动轮换 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="YangHui">
<META NAME="Keywords" CONTENT="YangHui">
<META NAME="Description" CONTENT="YangHui">
</HEAD>
<BODY>
<IMG name="animation" SRC="images/0.gif" WIDTH="180" HEIGHT="200" BORDER="0" ALT="晶莹">
<SCRIPT LANGUAGE="JavaScript">
<!--
var frame = 0;
var timeout_id = null;
function animate(){
document.animation.src = aniframes[frame].src;
if (frame == 3)
{
frame = 0;
} else{
frame = (frame + 1) % 10;
}
timeout_id = setTimeout("animate()", 500);
}
var aniframes = new Array(4);
var num_loaded_images = 0;
function countImages(){
if (++num_loaded_images == aniframes.length)
{
animate();
}
}
for (var i = 0; i < 4; i++)
{
aniframes[i] = new Image();
aniframes[i].onload = countImages;
aniframes[i].src = "images/" + i + ".gif";
}
//-->
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> 图片加载完毕后自动轮换 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="YangHui">
<META NAME="Keywords" CONTENT="YangHui">
<META NAME="Description" CONTENT="YangHui">
</HEAD>
<BODY>
<IMG name="animation" SRC="images/0.gif" WIDTH="180" HEIGHT="200" BORDER="0" ALT="晶莹">
<SCRIPT LANGUAGE="JavaScript">
<!--
var frame = 0;
var timeout_id = null;
function animate(){
document.animation.src = aniframes[frame].src;
if (frame == 3)
{
frame = 0;
} else{
frame = (frame + 1) % 10;
}
timeout_id = setTimeout("animate()", 500);
}
var aniframes = new Array(4);
var num_loaded_images = 0;
function countImages(){
if (++num_loaded_images == aniframes.length)
{
animate();
}
}
for (var i = 0; i < 4; i++)
{
aniframes[i] = new Image();
aniframes[i].onload = countImages;
aniframes[i].src = "images/" + i + ".gif";
}
//-->
</SCRIPT>
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
与服务器交互，ajax 很容易可以实现。
找下相关列子。
找下相关列子。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
很简单，从网上搜搜，例子很多。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
