您的位置:首页 > Web前端 > JQuery

最简洁jQuery图片渐变切换

2018-03-15 00:00 162 查看
前几天修改一个图片渐变切换的兼容,发现调用的是一个插件,改起来很麻烦,一狠心自己花了半天写了一个,大概有五六十行,结果图片切换的时候闪屏比较厉害,然后坐在那里想怎么解决,同时去看看那个插件的实现思路,突然来了灵感花了几分钟写了下面这样一个图片切换代码,泪奔(白花了半天的时间,到最后就这么点代码)...

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  幻灯片