jquery選項卡圖片分組滾動切換帶分頁的圖片滾動切換



98 391 131



特效描述:圖片分組 滾動切換 帶分頁圖片 滾動切換,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

加群請備注:從官網了解到

老夫子电子