jQuery带缩略图的选项卡大图切换代码



92 364 122



特效描述:缩略图选项卡 选项卡大图切换 选项卡切换,jQuery缩略图切换,大图切换,选项卡切换,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/index.css" media="all">

2. 引入JS

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

3. HTML代码

<div class="examples_body">
	<div class="examples_bg">
		<div class="examples_image">
			<img src="images/sample_banner1.jpg" alt="" />
			<div class="desc">
				<a href="#" class="collapse">Close Me!</a>
				<div class="block">
					<h4>第一号图片</h4>
					<small>第发布时间</small>
					<p>第,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源;同时提供网站开发及技术支持服务。</p>
				</div>
			</div>
		</div>
		<div class="mune_thumb">
			<ul>
				<li>
					<a href="images/sample_banner1.jpg"><img src="images/sample_banner1_thumb.jpg" alt="Image Name" /></a>
					<div class="block">
						<h4>第二号图片</h4>
						<small>第发布时间</small>
						<p>第,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源;同时提供网站开发及技术支持服务。</p>
					</div>
				</li>
				<li>
					<a href="images/sample_banner2.jpg"><img src="images/sample_banner2_thumb.jpg" alt="Image Name" /></a>
					<div class="block">
						<h4 class="title02">第三号图片</h4>
						<small>第发布时间</small>
						<p>第,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源;同时提供网站开发及技术支持服务。</p>
					</div>
				</li>
				<li>
					<a href="images/sample_banner3.jpg"><img src="images/sample_banner3_thumb.jpg" alt="Image Name" /></a>
					<div class="block">
						<h4 class="title03">第四号图片</h4>
						<small>第发布时间</small>
						<p>第,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源;同时提供网站开发及技术支持服务。</p>
					</div>
				</li>
				<li>
					<a href="images/sample_banner4.jpg"><img src="images/sample_banner4_thumb.jpg" alt="Image Name" /></a>
					<div class="block">
						<h4 class="title04">第五号图片</h4>
						<small>第发布时间</small>
						<p>第,web开发之家!服务于广大Web开发爱好者的免费技术资源网站,提供最专业的网页制作教程,网站源码和模板下载,网页特效、站长资讯等建站资源;同时提供网站开发及技术支持服务。</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 焦点图 幻灯片 轮播图 bar焦点图 带缩略图的幻灯片 带简介的焦点图 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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