最简洁jQuery图片渐变切换

最新推荐文章于 2019-06-09 10:41:51 发布

weixin_33735077

最新推荐文章于 2019-06-09 10:41:51 发布

阅读量612

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kangweb/blog/1635350

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

转载于:https://my.oschina.net/kangweb/blog/1635350