前几天修改一个图片渐变切换的兼容，发现调用的是一个插件，改起来很麻烦，一狠心自己花了半天写了一个，大概有五六十行，结果图片切换的时候闪屏比较厉害，然后坐在那里想怎么解决，同时去看看那个插件的实现思路，突然来了灵感花了几分钟写了下面这样一个图片切换代码，泪奔（白花了半天的时间，到最后就这么点代码）...
css：
<style type="text/css">
#banner,#banner img{position:relative;width:600px;height:290px;}
#banner{margin:0 auto;}
#banner img{position:absolute;top:0;left:0;filter:Alpha(opacity=100);opacity:1;}
</style>html：
<div id="banner">
<img src="images/demo01.jpg" />
<img src="images/demo02.jpg" />
<img src="images/demo03.jpg" />
</div>javascript：
<script type="text/javascript">
$(document).ready(function(){
//每隔3秒执行一次图片切换函数
window.setInterval("opChange()",3000);
})
function opChange(){
var e_first=$("#banner img:first");
var e_last=$("#banner img:last");
e_first.animate({"filter":"Alpha(opacity=0)","opacity":"0"},function(){
//第一个图片透明度变为0的时候，将它移动到最后
e_first.insertAfter(e_last);
//将最后一个图片的透明度恢复
e_last.animate({"filter":"Alpha(opacity=100)","opacity":"1"});
});
}
</script>完整示例：jQuery渐变幻灯片.zip
转播
