JS如何控制背景淡入淡出？
我有两个背景图片，想让它定时自动切换，但不要直接切换过来（只改CSS属性），要有个淡入淡出的效果。...
我有两个背景图片，想让它定时自动切换，但不要直接切换过来（只改CSS属性），要有个淡入淡出的效果。
展开
1个回答
展开全部
如下代码可以实现，不过你要首先下载一个JS插件：Jquery，我用的是jquery-1.9.1.min.js，你下载下来后放到网页同级目录就可以了，如入代码适用于2张或多张图片。
<div id="imgbox">
<img src="11.jpg" /><img src="22.jpg" />
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#imgbox img").fadeOut(0).eq(0).fadeIn(0);
var i = 0;
setInterval(function(){
if($("#imgbox img").length > (i+1)){
$("#imgbox img").eq(i).fadeOut(0).next("img").fadeIn(1000);
i++;
}
else{
$("#imgbox img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000);
i = 0;
}
},2000);
});
</script>
更多追问追答
追问
背景图片，要是单单div我知道可以，body的背景怎么弄呢
追答
抱歉没看清问题。
不过朋友，貌似没有什么好的方法能让body的背景图片淡入淡出，你可以搜搜看。
我推荐一种方法，还是用div，不过是把div伪造成一种body背景图片的假象，就是把div设置position:absolute;z-index:-999;，相当于把div里的图片放在网页最底部，不会干扰到其他内容，达到body背景图片效果。
具体代码如下，需要注意的是我写的这些style样式都不要删，删了可能会导致没有body背景图片的效果了。
废话不多说，上代码：
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:0px auto;padding:0px auto;}
.bgdiv{width:100%;height:100%;position:absolute;z-index:-999;}
.bgdiv img{width:100%;height:100%;border:0px;}
</style>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#imgbox img").fadeOut(0).eq(0).fadeIn(0);
var i = 0;
setInterval(function(){
if($("#imgbox img").length > (i+1)){
$("#imgbox img").eq(i).fadeOut(0).next("img").fadeIn(1000);
i++;
}
else{
$("#imgbox img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000);
i = 0;
}
},2000);
});
</script>
</head>
<body>
<div id="imgbox" class="bgdiv">
<img src="11.jpg" /><img src="22.jpg" />
</div>
<div>网页其他内21容网页其他3内23网页其他内1容312网页其他内容11</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
