请教一个div背景图片自动变换的

[Kenvle]

有个DIV，默认背景为一个图片，另外自动切换另外多个图片，作为它的背景图片，要求要有淡入淡出的效果，最好还能有按钮点击上下幅图片。
网上找到的图片自动切换都是使用的IMG标签，因为网页设计问题没法用IMG，请各位帮忙想想看啊。

我现在用的“document.getElementById('main_bg').style.backgroundImage=”这个语句来进行背景图片定时切换，但是切换图片的效果太笨了，不知道这个方法有没有可以添加图片切换效果的？

请大家帮帮忙呀！

[改一下昵称]

没有切换效果，要想淡入淡出就再写个底层的div，用 background-image还是 img标签 随你便。
JQuery中有淡入淡出的效果，或者直接用CSS 3 调整底层div透明度.

[Kenvle]

[Quote=引用 1 楼 dream1206 的回复:]

没有切换效果，要想淡入淡出就再写个底层的div，用 background-image还是 img标签 随你便。
JQuery中有淡入淡出的效果，或者直接用CSS 3 调整底层div透明度.
[/Quote]底层的div是啥意思啊？backgroundImage不是不能做切换效果的么？

[改一下昵称]

$('#main_bg').fadeOut(1000); // 花1000毫秒消失
#main_bg和css的选择器语法一样，我不知道淡入淡出的条件是什么不会写，我给你的那个link实例教程上有说明

[豆虫]

这个建议JQ实现吧 本人对JQ不是太熟 抱歉了~~~

[Kenvle]

我明白了，搞定了，谢谢指点！[Quote=引用 1 楼 dream1206 的回复:]

没有切换效果，要想淡入淡出就再写个底层的div，用 background-image还是 img标签 随你便。
JQuery中有淡入淡出的效果，或者直接用CSS 3 调整底层div透明度.
[/Quote]

[改一下昵称]

<div style="position:absolute; top:100px; left:100px; overflow:hidden; width:200px;height:200px;">
   <div id="top" style="position:absolute; top:0px; left:0px; background-color:transparent; width:200px;height:200px;">
   <!--  这是要显示内容，背景透明色-->
   </div>
   <div id="under" style="position:absolute; top:0px; left:0px; z-index:-1; width:200px;height:600px">
   <!-- 这是底层的div ，用来显示图片，可以调整高度。比如调整top 用来显示3张200*200的图片，前提是有三个 200*200 的div，每个div你想设置backgroundImage还是img随你。 -->
   <div>
</div>

其实思路很清晰 ，就是内容覆盖在图片上，重点是你可以调整图片透明度

[Kenvle]

不会jquery啊，你能帮我写个自动淡入淡出的jquery么？

<div style="width:1000px; height:644px;position:absolute;Z-index:-2;"><img id="main_bg" src="http://info-database.csdn.net/Upload/2011-09-20/475-60-jianhang.gif" style="filter:revealTrans(Duration=1.0,Transition=12)"/></div>


[Quote=引用 7 楼 dream1206 的回复:]

JQuery里就有现成的啊，兼容IE，chrome，火狐
$('#main_bg').fadeIn(1000); // 展现
$('#main_bg').fadeOut(1000); // 隐藏
http://www.w3school.com.cn/jquery/effect_fadein.asp

这个滤镜效果好像只对IE有效，要是考虑chrome,火狐,可以用CSS3的新特性
……
[/Quote]

[Kenvle]

<div style="width:1000px; height:644px;position:absolute;Z-index:-20;"><img id="main_bg" src="images/main_bg_1.jpg" style="filter:revealTrans(Transition=1,Duration=1.5)"/></div>

我是用的底DIV然后用的img的变换效果，这个滤镜有淡入淡出么？
[Quote=引用 5 楼 dream1206 的回复:]

HTML code

<div style="position:absolute; top:100px; left:100px; overflow:hidden; width:200px;height:200px;">
<div id="top" style="position:absolute; top:0px; left:0px; background-color:transpare……
[/Quote]

[改一下昵称]

JQuery里就有现成的啊，兼容IE，chrome，火狐
$('#main_bg').fadeIn(1000); // 展现
$('#main_bg').fadeOut(1000); // 隐藏
http://www.w3school.com.cn/jquery/effect_fadein.asp

这个滤镜效果好像只对IE有效，要是考虑chrome,火狐,可以用CSS3的新特性
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease; //chrome ,apple
-moz-transition: opacity 0.5s ease; //火狐
然后直接调整 opacity 的属性值就可以实现渐进的透明度变化

比如 opacity：0; 就可以用0.5秒来使div完全透明


还是建议你用JQuery来控制