QQ客服
當前位置 : 首頁 > 代碼 > 網頁特效 > 導航菜單 > jquery左側分類導航菜單和圖片輪播滾動布局代碼

原創商用 jquery左側分類導航菜單和圖片輪播滾動布局代碼

jquery 實現 左側固定二級菜單導航和帶左右按鈕控制圖片輪播滾動代碼布局, 基于superslide開發的js css 分離,結構簡單清晰,下載即可使用。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權保護,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

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="#">系統分析師</a>
						</li>
						<li>
							<a href="#">信息系統項目管理師</a>
						</li>
						<li>
							<a href="#">網絡規劃設計師</a>
						</li>
						<li>
							<a href="#">系統架構設計師</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">系統規劃與管理師</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="#">軟件設計師網絡工程師</a>
						</li>
						<li>
							<a href="#">信息系統監理師</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">信息系統管理工程師</a>
						</li>
						<li>
							<a href="#">電子商務設計師</a>
						</li>
						<li>
							<a href="#">軟件評測師</a>
						</li>
						<li>
							<a href="#">信息安全工程師</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">數據庫系統工程師</a>
						</li>
						<li>
							<a href="#">嵌入式系統設計師</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="#">網絡管理員</a>
						</li>
						<li>
							<a href="#">信息處理技術員</a>
						</li>
						<li>
							<a href="#">信息系統運行管理員</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="#">工程法規</a>
						</li>
						<li>
							<a href="#">施工管理</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="#">市政工程</a>
						</li>
						<li>
							<a href="#">機電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業工程</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="#">工程法規</a>
						</li>
						<li>
							<a href="#">施工管理</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="#">市政工程</a>
						</li>
						<li>
							<a href="#">機電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業工程</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="#">工程法規</a>
						</li>
						<li>
							<a href="#">施工管理</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="#">市政工程</a>
						</li>
						<li>
							<a href="#">機電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業工程</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="#">工程法規</a>
						</li>
						<li>
							<a href="#">施工管理</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="#">市政工程</a>
						</li>
						<li>
							<a href="#">機電工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水電工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">礦業工程</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>
			免費公開課
		</a>
		<a href="#">學習包</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> 
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 新浪注冊 立即下載

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了
cc竞速飞车公式规律