jquery左側(cè)分類導(dǎo)航菜單和圖片輪播滾動布局代碼

jquery 實現(xiàn) 左側(cè)固定二級菜單導(dǎo)航和帶左右按鈕控制圖片輪播滾動代碼布局，基于superslide開發(fā)的js css 分離，結(jié)構(gòu)簡單清晰，下載即可使用。

使用方法：

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代碼

<div class="city-nav-header">
	<div class="city-nav-list">
		<a href="#">
			<img src="images/icon-001.png" alt="">課程中心
		
		</a>
		<div class="city-nav-left">
			<dl>
				<dd>
					<a href="#" class="arrow">
						<img src="images/icon-002.png" alt="">軟件水平考試
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">高　級：</a>
						</li>
						<li>
							<a href="#">系統(tǒng)分析師</a>
						</li>
						<li>
							<a href="#">信息系統(tǒng)項目管理師</a>
						</li>
						<li>
							<a href="#">網(wǎng)絡(luò)規(guī)劃設(shè)計師</a>
						</li>
						<li>
							<a href="#">系統(tǒng)架構(gòu)設(shè)計師</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">系統(tǒng)規(guī)劃與管理師</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">中　級：</a>
						</li>
						<li>
							<a href="#">系統(tǒng)集成項目管理工程師 </a>
						</li>
						<li>
							<a href="#">軟件設(shè)計師網(wǎng)絡(luò)工程師</a>
						</li>
						<li>
							<a href="#">信息系統(tǒng)監(jiān)理師</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">信息系統(tǒng)管理工程師</a>
						</li>
						<li>
							<a href="#">電子商務(wù)設(shè)計師</a>
						</li>
						<li>
							<a href="#">軟件評測師</a>
						</li>
						<li>
							<a href="#">信息安全工程師</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">數(shù)據(jù)庫系統(tǒng)工程師</a>
						</li>
						<li>
							<a href="#">嵌入式系統(tǒng)設(shè)計師</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">初　級：</a>
						</li>
						<li>
							<a href="#">程序員</a>
						</li>
						<li>
							<a href="#">網(wǎng)絡(luò)管理員</a>
						</li>
						<li>
							<a href="#">信息處理技術(shù)員</a>
						</li>
						<li>
							<a href="#">信息系統(tǒng)運(yùn)行管理員</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-003.png" alt="">二級建造師
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公　共：</a>
						</li>
						<li>
							<a href="#">工程法規(guī)</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">實　務(wù)：</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">機(jī)電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業(yè)工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-004.png" alt="">一級建造師
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公　共：</a>
						</li>
						<li>
							<a href="#">工程法規(guī)</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">實　務(wù)：</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">機(jī)電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業(yè)工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-005.png" alt="">通信水平考試
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公　共：</a>
						</li>
						<li>
							<a href="#">工程法規(guī)</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">實　務(wù)：</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">機(jī)電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業(yè)工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-006.png" alt="">資格考試/考研
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公　共：</a>
						</li>
						<li>
							<a href="#">工程法規(guī)</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">實　務(wù)：</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">機(jī)電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業(yè)工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-007.png" alt="">PMP/ACP/NPDP
					
					</a>
					<ul class="city-nav-casket" style="width:240px;">
						<li style="height: 32px; line-height: 32px;border-right: medium none;">
							<a href="#">PMP考試</a>
						</li>
						<li style="height: 32px; line-height: 32px;border-right: medium none;">
							<a href="#">ACP考試</a>
						</li>
						<li style="height: 32px; line-height: 32px;border-right: medium none;">
							<a href="#">NPDP考試</a>
						</li>
					</ul>
				</dd>
			</dl>
		</div>
	</div>
	<div class="city-nav-item">
		<a href="#">
			<i></i>
			免費(fèi)公開課
		</a>
		<a href="#">學(xué)習(xí)包</a>
		<a href="#" style="color:#08acee">直播課堂</a>
		<a href="#">視頻中心</a>
		<a href="#">云閱讀</a>
		<a href="#">題庫</a>
	</div>
</div>
<div class="city-slide">
	<div class="hd city-slide-header">
		<a class="prev" href="javascript:void(0)"></a>
		<a class="next" href="javascript:void(0)"></a>
	</div>
	<div class="bd city-slide-body">
		<ul>
			<li style="background:#bf271d">
				<a href="#">
					<img src="images/banner1.jpg" alt="">
				</a>
			</li>
			<li style="background:#0f2049">
				<a href="#">
					<img src="images/banner2.jpg" alt="">
				</a>
			</li>
			<li style="background:#d3ebfb">
				<a href="#">
					<img src="images/banner3.jpg" alt="">
				</a>
			</li>
			<li style="background:#7094fc">
				<a href="#">
					<img src="images/banner4.png" alt="">
				</a>
			</li>
			<li style="background:#44affc">
				<a href="#">
					<img src="images/banner5.jpg" alt="">
				</a>
			</li>
		</ul>
	</div>
</div>

<script type="text/javascript">
	jQuery(".city-nav-list").slide({
		type: "menu",
		titCell: "dd",
		targetCell: "ul",
		delayTime: 0,
		defaultPlay: false,
		returnDefault: true
	});

	jQuery(".city-slide").slide({
		mainCell: ".bd ul",
		effect: "fold",
		autoPlay: true,
		delayTime: 800
	});
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

查看演示下載資源

0 17941 73

軟件 Dreamweaver
格式 HTML
作者歪秀
版權(quán) ? 原創(chuàng)商用（獨(dú)家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識產(chǎn)權(quán)，如知識產(chǎn)權(quán)權(quán)利人認(rèn)為平臺內(nèi)容涉嫌侵權(quán)，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。