js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 图片相册

jquery实现图片相册淡入淡出特效插件

发布时间:2015-08-26 23:38:08    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现图片相册淡入淡出特效插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
	<title>jquery实现图片相册淡入淡出特效插件</title>    
</head>    
<body>    
<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" src="js/jquery.js"></script>    
<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.jstxdm.com"><img width="395" height="511" alt="美女" src="images/1.jpg" /></a></li>    
		<li><a href="http://www.jstxdm.com"><img width="395" height="511" alt="美女" src="images/2.jpg" /></a></li>    
	</ul>    
</div>    
<script type="text/javascript">    
$(document).ready(function(){    
	$('.flash').imgtransition({    
		speed:3000,  //图片切换时间    
		animate:1000 //图片切换过渡时间    
	});    
});    
</script>     
</body>    
</html>



淡入 淡出 图片相册

jquery实现图片相册淡入淡出特效插件

jquery点击切换,3d淡入动画,头像相册特效

jQuery淡入无限加载瀑布流网页特效

jQuery自动播放淡入淡出的幻灯片特效

jquery仿UC浏览器网站带缩略图淡入淡出的banner特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

js实现左往右淡入淡出的居中弹窗特效代码

jQuery自动播放淡入淡出的幻灯片特效

jquery仿UC浏览器网站带缩略图淡入淡出的banner特效

jquery仿支付宝全屏图片幻灯片淡出淡进切换特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

js实现左往右淡入淡出的居中弹窗特效代码

js实现网站常用简洁的TAB选项卡淡出淡进切换特效代码