jQuery带选项卡标签的全屏焦点图片滑动切换代码



178 711 238



特效描述:jQuery 带选项卡标签 全屏焦点图片 滑动切换,很漂亮的通栏标题切换加自动切换焦点图

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/jquery.focusbanner.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.focusbanner.js"></script>

3. HTML代码

<div class="focus">
	<ul class="f-img-list">
		<li class="bg01 on"><a href="http://www.dijiuzhanzhang.com/"></a></li>
		<li class="bg02"><a href="http://www.dijiuzhanzhang.com/"></a></li>
		<li class="bg03"><a href="http://www.dijiuzhanzhang.com/"></a></li>
		<li class="bg04"><a href="http://www.dijiuzhanzhang.com/"></a></li>
	</ul>
	<ul class="d-select-list">
		<li class="on">
			<a href="http://www.dijiuzhanzhang.com/">
				<div class="title">八度优惠活动!</div>
				<div class="icon"><img src="images/icon3.png" /></div>
				<div class="desc">群机璀璨<br />优惠无极限</div>
			</a>
			<div class="arrow"></div>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/">
				<div class="title">云主机年付</div>
				<div class="icon"><img src="images/icon2.png" /></div>
				<div class="desc">年付700送50<br />满1000返150</div>
			</a>
			<div class="arrow"></div>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/">
				<div class="title">八度网络</div>
				<div class="icon"><img src="images/icon1.png" /></div>
				<div class="desc">托管8元/天 租用9元/天</div>
			</a>
			<div class="arrow"></div>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/">
				<div class="title">云服务器租用全场八折</div>
				<div class="icon"><img src="images/icon4.png" /></div>
				<div class="desc">DELL至强四核高配置服务器</div>
			</a>
			<div class="arrow"></div>
		</li>
	</ul>
	<div class="focusbtn focus-btn-next"></div>
	<div class="focusbtn focus-btn-prev"></div>
</div>
<script type="text/javascript">
(function($){
	$(window).load(function(){
		$('.focus').focusbanner({
			loopBody: '.f-img-list',
			curClass: 'on',
			speed: 500,
			gap: 3000,
			next: '.focus-btn-next',
			prev: '.focus-btn-prev',
			selectlist: '.d-select-list'
		});
	});
})(jQuery);
</script>



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


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 全屏焦点图 全屏切换 切换按钮 宽屏全屏满屏 form表单 焦点图幻灯片 图片全屏 图片滑动 图片切换 图片轮播 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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