js图片淡进淡出效果图片淡入淡出特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

8 28 10



特效描述:图片淡进淡出。js图片淡进淡出效果图片淡入淡出特效代码下载

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* flash */
.flash{width:395px;height:511px;overflow:hidden;position:relative;margin:20px auto;}
.flash li{position:absolute;left:0;top:0;width:395px;height:511px;}
</style>
<script type="text/javascript">
//图片简单切换调用语句 imgtransition({speed: 3000, animate: 1000}); 
$.fn.imgtransition = function(o){
	var defaults = {
		speed : 5000,
		animate : 1000
	};
	o = $.extend(defaults, o);
	return this.each(function(){
		var arr_e = $("li", this);
		arr_e.css({position: "absolute"});
		arr_e.parent().css({margin: "0", padding: "0", "list-style": "none", overflow: "hidden"});
		function shownext(){
			var active = arr_e.filter(".active").length ? arr_e.filter(".active") : arr_e.first();
			var next =  active.next().length ? active.next() : arr_e.first();
			active.css({"z-index": 9});
			next.css({opacity: 0.0, "z-index": 10}).addClass('active').animate({opacity: 1.0}, o.animate, function(){
				active.removeClass('active').css({"z-index": 8});
			});
		}
		arr_e.first().css({"z-index": 9});
		setInterval(function(){
			shownext();
		},o.speed);
	});
};
</script>
<div class="flash">
	<ul>
		<li><a href="http://www.51qianduan.com/"><img width="395" height="511" alt="美女" src="images/126.jpg" /></a></li>
		<li><a href="http://www.51qianduan.com/"><img width="395" height="511" alt="美女" src="images/12456.jpg" /></a></li>
	</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('.flash').imgtransition({
		speed:3000,  //图片切换时间
		animate:1000 //图片切换过渡时间
	});
});
</script> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片淡出淡进 文字淡出淡进 渐隐切换 淡出淡入淡进

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到