jquery选项卡图片分组滚动切换带分页的图片滚动切换



94 375 126



特效描述:图片分组 滚动切换 带分页图片 滚动切换,jquery选项卡图片分组切换,带标题和详细内容的分组图片滚动切换,带分页提示的分组图片滚动切换。

代码结构

1. 引入CSS

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

2. 引入JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/adam-banner.js" type="text/javascript"></script>

3. HTML代码

	<div id="adam-eff">
		<dl id="adam-tabs">
			<dd><a href="javascript:void(0);">大气外观</a></dd>
			<dd><a href="javascript:void(0);">精美内饰</a></dd>
			<dd><a href="javascript:void(0);">卓越功能</a></dd>
			<dt><span>0</span>/<samp>0</samp></dt>
		</dl>
		<div id="adam-tabsContent">
			<!-- 对应 <dd>大气外观</dd> -->
			<div class="adam-tabs-list">
				<div class="adam-scroll">
					<div class="adam-big-img">
						<ul>
							<li><a href="http://www.17sucai.com/"><img src="images/qicheheji_109610_m.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/gaoqingqichebizhi1600x1200_382191_1.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/ml3201.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/qicheheji_109610_m.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/qicheheji_109610_m.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/qicheheji_109610_m.jpg" height="292" width="564"></a></li>
						</ul>
						<b class="adam-scroll-prev"><</b>
						<b class="adam-scroll-next">></b>
					</div>
					<dl class="adam-small-imglist">
						<dd><a title="C型LED光导带尾灯1" content="1家族式C型光导带尾灯,采用最新LED光导带技术。"><img src="images/new_01a.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题2" content="测试内容2测试内容2测试内容2测试内容2测试内容2测试内容2"><img src="images/new_01b.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题3" content="测试内容3测试内容3测试内容3测试内容3"><img src="images/new_01c.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题4" content="测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4"><img src="images/new_01d.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题5" content="测试内容5测试内容5测试内容5测试内容5测试内容5测试内容5"><img src="images/new_01e.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题6" content="测试内容2测试内容2测试内容2测试内容2测试内容2测试内容2"><img src="images/new_01b.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题7" content="测试内容3测试内容3测试内容3测试内容3"><img src="images/new_01c.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题8" content="测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4"><img src="images/new_01d.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题9" content="测试内容5测试内容5测试内容5测试内容5测试内容5测试内容5"><img src="images/new_01e.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题10" content="测试内容5测试内容5测试内容5测试内容5测试内容5测试内容5"><img src="images/new_01e.jpg" height="54" width="103"></a></dd>
					</dl>
				</div>
				<div class="adam-news"><div></div><p></p></div>
			</div>
			<!-- 对应 <dd>精美内饰</dd> -->
			<div class="adam-tabs-list">
				<div class="adam-scroll">
					<div class="adam-big-img">
						<ul>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/qicheheji_109610_m.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
						</ul>
						<b class="adam-scroll-prev"><</b>
						<b class="adam-scroll-next">></b>
					</div>
					<dl class="adam-small-imglist">
						<dd><a title="C型LED光导带尾灯2" content="2家族式C型光导带尾灯,采用最新LED光导带技术。"><img src="images/new_01a.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题2" content="测试内容2测试内容2测试内容2测试内容2测试内容2测试内容2"><img src="images/new_01b.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题3" content="测试内容3测试内容3测试内容3测试内容3"><img src="images/new_01c.jpg" height="54" width="103"></a></dd>
					</dl>
				</div>
				<div class="adam-news"><div></div><p></p></div>
			</div>
			<!-- 对应 <dd>卓越功能</dd> -->
			<div class="adam-tabs-list">
				<div class="adam-scroll">
					<div class="adam-big-img">
						<ul>
							<li><a href="http://www.17sucai.com/"><img src="images/qicheheji_109610_m.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/gaoqingqichebizhi1600x1200_382191_1.jpg" height="292" width="564"></a></li>
							<li><a href="http://www.17sucai.com/"><img src="images/new_01.jpg" height="292" width="564"></a></li>
						</ul>
						<b class="adam-scroll-prev"><</b>
						<b class="adam-scroll-next">></b>
					</div>
					<dl class="adam-small-imglist">
						<dd><a title="C型LED光导带尾灯3" content="3家族式C型光导带尾灯,采用最新LED光导带技术。"><img src="images/new_01a.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题2" content="测试内容2测试内容2测试内容2测试内容2测试内容2测试内容2"><img src="images/new_01b.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题3" content="测试内容3测试内容3测试内容3测试内容3"><img src="images/new_01c.jpg" height="54" width="103"></a></dd>
						<dd><a title="测试标题4" content="测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4测试内容4"><img src="images/new_01d.jpg" height="54" width="103"></a></dd>
					</dl>
				</div>
				<div class="adam-news"><div></div><p></p></div>
			</div>
		</div>
	</div>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滚动切换 滚动条切换 滑动选项卡 滑动切换 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滚动切换 滚动条切换 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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