jQuery广告图片各大百货公司首页流行通栏广告图片-20130702 _Web前端

jQuery广告图片各大商城首页流行通栏广告图片-20130702
[html5]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* advbox */
.advbox{width:990px;margin:0 auto;}
.advbox .dt_small{width:990px;}
.advbox .dt_big{width:990px;}
.advbox .dt_toBig{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_showTL_1201.png");cursor:pointer;}
.advbox .dt_toSmall{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_closeTL_1201.png");cursor:pointer;}
</style>

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

<div class="advbox">

	<div class="dt_small" style="display:none;">
		<div class="dt_toBig" style="display:none;"></div>
		<a href="http://www.17sucai.com/" target="_blank"><img src="images/1325.jpg" width="990" height="60" alt="jquery广告图片缩略图" /></a>
	</div>
	
	<div class="dt_big">
		<div class="dt_toSmall"></div>
		<a href="http://www.17sucai.com/" target="_blank"><img id="actionimg" src="images/sa11.jpg" width="990" height="500" alt="jquery广告图片大图" /></a>
	</div>
	
</div>

<script type="text/javascript">
function AdvClick(){
//定义方法
	var a=1500;
	//点击关闭后的的小图显示出来的时间
	$(".dt_toSmall").click(function(){
	//定义关闭按钮的点击
		$(".dt_small").delay(a).slideDown(a);
		//定义第二轮的点击关闭按钮以后显示出小图片和显示的时间
		$(".dt_big").stop().slideUp(a);
		//定义第二轮点击关闭按钮大图片向下移动并消失
		$(".dt_toBig").delay(a*2).fadeIn(0)
		//定义显示第二轮的在点击完关闭按钮以后显示出小图片后的小图片的坐上方的重播按钮的显示
	});
	$(".dt_toBig").click(function(){
	//定义重播按钮的事件
		$(".dt_big").delay(a).slideDown(a);
		//定义点击完第二轮的重播按钮让大图片显示出来的效果和时间
		$(".dt_small").stop().slideUp(a);
		//定义点击完第一轮的重播按钮隐藏小图片
	})
}
</script>

<script type="text/javascript">
$(document).ready(function(){
//函数规定当 ready 事件发生时执行的代码
	AdvClick();
	//实现AdvClick方法
});
</script>				

</body>
</html>