jquery ui浮动广告图片插件自动轮播图片切换



176 700 234



特效描述:jquery ui 浮动广告图片 自动轮播 图片切换,jquery ui浮动广告图片插件自动轮播图片切换

代码结构

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;}
/* 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.51qianduan.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.51qianduan.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;
	var b=3*1000;
	$(".dt_toSmall").click(function(){
		$(".dt_small").delay(a).slideDown(a);
		$(".dt_big").stop().slideUp(a);
		$(".dt_toSmall").stop().fadeOut(0);
		$(".dt_toBig").delay(a*2).fadeIn(0)
	});$
	(".dt_toBig").click(function(){
		$(".dt_big").delay(a).slideDown(a);
		$(".dt_small").stop().slideUp(a);
		$(".dt_toBig").stop().fadeOut(0);
		$(".dt_toSmall").delay(a*2).fadeIn(0)
	})
}
function AdvAuto(){
	if($(".dt_big").length>0){
		var a=1500;
		var b=3*1000;
		$(".dt_big").delay(b).slideUp(a,function(){
			$(".dt_small").slideDown(a);
			$(".dt_toBig").delay(a).fadeIn(0)
		});
		$(".dt_toSmall").delay(b).fadeOut(0)
	}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
	AdvClick();
});
//顶部通览可展开收起效果
if($("#actionimg").length>0){	
	$("#actionimg").onload=AdvAuto();
}
</script>				



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


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 导航切换 图片广告 对联广告 图片切换 文字切换 叠加浮动层 背景切换 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 悬浮浮动漂浮 选项卡切换 滑动手风琴 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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