有个DIV,默认背景为一个图片,另外自动切换另外多个图片,作为它的背景图片,要求要有淡入淡出的效果,最好还能有按钮点击上下幅图片。
网上找到的图片自动切换都是使用的IMG标签,因为网页设计问题没法用IMG,请各位帮忙想想看啊。我现在用的“document.getElementById('main_bg').style.backgroundImage=”这个语句来进行背景图片定时切换,但是切换图片的效果太笨了,不知道这个方法有没有可以添加图片切换效果的?请大家帮帮忙呀!
网上找到的图片自动切换都是使用的IMG标签,因为网页设计问题没法用IMG,请各位帮忙想想看啊。我现在用的“document.getElementById('main_bg').style.backgroundImage=”这个语句来进行背景图片定时切换,但是切换图片的效果太笨了,不知道这个方法有没有可以添加图片切换效果的?请大家帮帮忙呀!
JQuery中有淡入淡出的效果,或者直接用CSS 3 调整底层div透明度.
<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>其实思路很清晰 ,就是内容覆盖在图片上,重点是你可以调整图片透明度
$('#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来控制
#main_bg和css的选择器语法一样,我不知道淡入淡出的条件是什么不会写,我给你的那个link实例教程上有说明