jQuery在線課程分類導航和banner圖片布局代碼

jQuery基于superslide開發制作綠色寬屏的在線課程教育網站分類導航菜單和banner圖片輪播切換布局代碼。

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/ux-micro-icon.css">

2、head引入js文件

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

3、body引入HTML代碼

<div class="m-indextopwrap f-pr">
	<div class="m-indextopnav">
		<div class="g-flow">
			<div class="topnav f-pr f-cb">
				<div class="u-indexnavcatebtn">
					<a href="#" target="_blank" class="cbtn f-cb">
					<div class="ic f-fl">
					</div>
					<span class="qb f-fl f-f0">全部精品課</span></a>
				</div>
				<div class="u-indexnavcatedialog f-pa" id="j-nav-indexcatedialog">
					<div class="f-fl cateleft f-pa">
						<div class="catebg f-pa">
						</div>
						<div class="items f-pa">
							<div class="item">
								<div class="curbg">
								</div>
								<div class="inn">
									<p>
										<a target="_blank" href="#" class="f-f0 first">辦公效率</a>
										<a href="#" target="_blank" class="second">PPT</a>
										<a href="#" target="_blank" class="second">Excel</a>
										<a href="#" target="_blank" class="second">Word</a>
									</p>
								</div>
							</div>
							<div class="item">
								<div class="curbg">
								</div>
								<div class="inn">
									<p>
										<a target="_blank" href="#" class="f-f0 first">職業發展</a>
										<a href="#" target="_blank" class="second">個人成長</a>
										<a href="#" target="_blank" class="second">演講口才</a>
									</p>
								</div>
							</div>
							<div class="item">
								<div class="curbg">
								</div>
								<div class="inn">
									<p>
										<a target="_blank" href="#" class="f-f0 first">編程開發</a>
										<a href="#" target="_blank" class="second">人工智能</a>
										<a href="#" target="_blank" class="second">Python</a>
									</p>
								</div>
							</div>
							<div class="item">
								<div class="curbg">
								</div>
								<div class="inn">
									<p>
										<a target="_blank" href="#" class="f-f0 first">產品和設計</a>
										<a href="#" target="_blank" class="second">軟件</a>
										<a href="#" target="_blank" class="second">產品運營</a>
										<a href="#" target="_blank" class="second">新媒體</a>
										<a href="#" target="_blank" class="second">產品策劃</a>
									</p>
								</div>
							</div>
							<div class="item">
								<div class="curbg">
								</div>
								<div class="inn">
									<p>
										<a target="_blank" href="#" class="f-f0 first">生活方式</a>
										<a href="#" target="_blank" class="second">攝影</a>
										<a href="#" target="_blank" class="second">書法</a>
										<a href="#" target="_blank" class="second">理財</a>
									</p>
								</div>
							</div>
							<div class="item">
								<div class="curbg">
								</div>
								<div class="inn">
									<p>
										<a target="_blank" href="#" class="f-f0 first">升學輔導</a>
										<a href="#" target="_blank" class="second">考研</a>
										<a href="#" target="_blank" class="second">STEAM</a>
										<a href="#" target="_blank" class="second">小學</a>
									</p>
								</div>
							</div>
							<div class="item last">
								<div class="curbg">
								</div>
								<div class="inn">
									<p>
										<a target="_blank" href="#" class="f-f0 first">語言學習</a>
										<a href="#" target="_blank" class="second">英語</a>
										<a href="#" target="_blank" class="second">日語</a>
										<a href="#" target="_blank" class="second">新概念</a>
										<a href="#" target="_blank" class="second">實用口語</a>
										<a href="#" target="_blank" class="second">韓語</a>
									</p>
								</div>
							</div>
						</div>
					</div>
					<div class="cateright f-pa f-cb">
						<a class="close f-pa j-close" onclick="$('.rwrap').hide();"></a>
						<div class="f-pr rwrap f-cb cur">
							<div class="rwrap-left f-cb">
								<div class="top-rec-box f-cb">
									<a class="top-rec f-fl" href="#" target="_blank">辦公效率·精選好課</a>
									<a class="top-rec f-fl" href="#" target="_blank">跟劉萬祥學Excel商務圖表</a>
								</div>
								<a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">辦公軟件</a>
								<div class="links">
									<span class="seperate">|</span>
									<p class="cate3links">
										<a target="_blank" href="#" class="f-f0 rec">PPT</a>
										<span class="slash">|</span>
										<a target="_blank" href="#" class="f-f0 rec">Excel</a>
										<span class="slash">|</span>
										<a target="_blank" href="#" class="f-f0 ">Word</a>
										<span class="slash">|</span>
										<a target="_blank" href="#" class="f-f0 ">Project</a>
										<span class="slash">|</span>
										<a target="_blank" href="#" class="f-f0 ">Keynote</a>
										<span class="slash">|</span>
										<a target="_blank" href="#" class="f-f0 ">Outlook</a>
										<span class="slash">|</span>
										<a target="_blank" href="#" class="f-f0 ">更多軟件</a>
									</p>
								</div>
								<a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">工作效率</a>
								<div class="links">
									<span class="seperate">|</span>
									<p class="cate3links">
										<a target="_blank" href="#" class="f-f0 ">時間管理</a>
										<span class="slash">|</span>
										<a target="_blank" href="#" class="f-f0 rec">思維導圖</a>
									</p>
								</div>
								<a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">電腦基礎</a>
								<div class="links">
									<span class="seperate">|</span>
									<p class="cate3links">
										<a 基礎操作" target="_blank" href="#" class="f-f0 ">基礎操作</a>
										<span class="slash">|</span>
										<a 常用工具" target="_blank" href="#" class="f-f0 ">常用工具</a>
									</p>
								</div>
							</div>
							<div class="rwrap-right f-cb">
								<a class="f-f0 tit" href="#" target="_blank">系列課程</a>
								<p class="links">
									<a href="#" class="f-cb f-fc6 f-f0" target="_blank">從Excel到Power BI數據分析可視化</a>
									<a href="#" class="f-cb f-fc6 f-f0" target="_blank">Excel+PPT+Word小白變大神</a>
									<a href="#" class="f-cb f-fc6 f-f0" target="_blank">英語口語指南——為暑期出境旅游定制</a>
									<a href="#" class="f-cb f-fc6 f-f0" target="_blank">向《經濟學人》學圖表</a>
									<a href="#" class="f-cb f-fc6 f-f0" target="_blank">向商業期刊學圖表</a>
									<a href="#" class="f-cb f-fc6 f-f0" target="_blank">如何成為真正的PPT高手</a>
									<a href="#" class="f-fc6 f-f0" target="_blank">更多>></a>
								</p>
								<a href="#" target="_blank" class="picwrap">
								<img src="images/4ff708d8-9b24-43ea-a423-2496ee0cc901.png" class="f-pa pic">
								</a>
							</div>
						</div>
						
					</div>
					<script type="text/javascript">		
						jQuery("#j-nav-indexcatedialog").slide({ 
							titCell:".item", //鼠標觸發對象
							targetCell:".rwrap", //titCell里面包含的要顯示/消失的對象
							delayTime:100, //效果時間
							defaultPlay:false,
							triggerTime:0, //鼠標延遲觸發時間（默認150）
							returnDefault:true //鼠標移走后返回默認狀態，例如默認頻道是“預告片”，鼠標移走后會返回“預告片”（默認false）
						});
					</script>
				</div>
				<div class="mainnav f-cb j-navFind">
					<a class="nitem f-f0" href="#" target="_self" >微專業</a>
					<div class="f-cb nitem f-f0 x-hoverItem">
						<span>課程體系</span>
						<div class="f-pa u-navdropmenu x-child">
							<span class="arrr f-pa"></span>
							<a class="f-f0 dropitem " target="_blank" href="#" >
							<span>IBM認知計算</span>
							</a>
							<a class="f-f0 dropitem " target="_blank" href="#" >
							<span>大學計算機專業</span>
							</a>
							<a class="f-f0 dropitem " target="_blank" href="#" >
							<span>互聯網職業技能</span>
							</a>
							<a class="f-f0 dropitem last" target="_blank" href="#" >
							<span>職場提升課程體系</span>
							</a>
						</div>
					</div>
					<a class="nitem f-f0 f-dn" target="_blank" href="#" >企業版</a>
					<div class="nitem f-f0 x-hoverItem down-wrap">
						<span class="downApp">下載APP</span>
						<div class="u-navapptip f-pa x-child">
							<div class="arrr f-pa">
							</div>
							<img src="images/nav_qrcode.png" class="ewm f-fl" alt="下載APP" title="下載APP">
							<div class="rcon f-fr">
								<h4 class="txt">掃碼下載官方App</h4>
								<a href="#" target="_self" class="store apple"></a>
								<a href="#" target="_self" class="store android"></a>
							</div>
						</div>
					</div>
					<a class="nitem f-f0" href="#" target="_blank">企業培訓</a>
				</div>
				<div class="search off f-cb">
					<div class="box f-cb">
						<input type="text" maxlength="30" placeholder="搜索課程">
					</div>
					<div class="submit f-hide f-pa"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="m-slide-container">
	<div>
		<div class="m-slide f-pr">
			<div class="f-pr m-slide-wrap" id="j-slidewrap">
				<div class="slide" target="_blank" id="j-slide" href="#">
					<ul>
						<li><a href=""><img src="images/22f32255-a49c-4db1-a93b-8f3a508b0ed6.jpg"></a></li>
						<li><a href=""><img src="images/8A52811B4B0D8869DD974FE5075EA597.jpg"></a></li>
						<li><a href=""><img src="images/8e164ab4-4f74-4445-aca6-321b67dcf7f5.jpg"></a></li>
						<li><a href=""><img src="images/a336d02e-7a42-47b0-8631-9034c9471c71.jpg"></a></li>
						<li><a href=""><img src="images/bc4f08ee-aa9c-4d49-a14a-5cbf3d59f80f.jpg"></a></li>
						<li><a href=""><img src="images/e4954183-4f72-45f4-ac45-e6ebb2dfc275.jpg"></a></li>
						<li><a href=""><img src="images/01C52854E262EAD6FD4AC98B74B45B96.jpg"></a></li>
					</ul>
				</div>
				<a class="lbtn prev"></a>
				<a class="rbtn next"></a>
				<div class="u-slidepg">
					<ul class="f-cb f-pr f-ib pbox">
						<li class="on">1</li>
						<li class="">2</li>
						<li class="">3</li>
						<li class="">4</li>
						<li class="">5</li>
						<li class="">6</li>
						<li class="">7</li>
					</ul>
				</div>
				<div class="sideNav f-pa">
					<div class="yktqr f-pa" style="display:none;">
						<img src="682c5edb-c0b2-4725-bf2b-cc7c441d7e30.png">
					</div>
					<a href="#" class="sidelink" target="_blank">
					<div class="livecard f-pr">
						<img src="images/000C36B6E1BE3E4D6ADC284F104D7DB1.jpg" alt="直播卡片圖" class="sideimg">
						<div class="cnt f-f0 j-cnt">
							<p class="title">
									十大影響因素，教你輕松提升手淘搜索排名
							</p>
							<p class="time">
									時間：7.28 20:00 ~ 22:00
							</p>
							<p class="teacher">
									講師：齊論高級講師 無銘
							</p>
						</div>
					</div>
					</a>
				</div>
			</div>
			<div class="lbevel f-pa">
			</div>
			<div class="rbevel f-pa">
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">		
	jQuery("#j-slidewrap").slide({
		titCell:".u-slidepg ul li",
		mainCell:".slide ul",
		autoPlay:true,
		delayTime:0,
	});	
</script>

<div class="m-micro" id="j-micro">
	<div class="g-flow f-pr">
		<div class="f-cb m-micro-wrap">
			<div class="cntwrap" id="j-cntwrap">
				<div class="cntlist" id="j-cntlist">
					<ul>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001360001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								初級前端開發工程師
						</div>
						<div class="tip f-f0 f-thide">
								網易一線前端工程師親授
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001359001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								Python數據分析師
						</div>
						<div class="tip f-f0 f-thide">
								帶你一起用數據認識世界
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001359003 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								產品經理
						</div>
						<div class="tip f-f0 f-thide">
								系統學習產品方法論
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001429007 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								區塊鏈開發工程師
						</div>
						<div class="tip f-f0 f-thide">
								帶你成為鏈接未來的人才
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001358003 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								人工智能數學基礎
						</div>
						<div class="tip f-f0 f-thide">
								精準掌握人工智能核心數學
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001360002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								初級UI設計師
						</div>
						<div class="tip f-f0 f-thide">
								網易設計專家經典出品
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001127001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								產品運營
						</div>
						<div class="tip f-f0 f-thide">
								運營大咖強強聯合
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001358002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								機器學習工程師
						</div>
						<div class="tip f-f0 f-thide">
								一線機器學習專家聯合打造
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001180001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								python應用基礎
						</div>
						<div class="tip f-f0 f-thide">
								名校名師的python實踐課
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001352005 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								互聯網項目管理
						</div>
						<div class="tip f-f0 f-thide">
								網易一線成功產品項目經驗
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								高級UI設計師
						</div>
						<div class="tip f-f0 f-thide">
								最詳盡深入的產品設計指導
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001420002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								大數據開發工程師
						</div>
						<div class="tip f-f0 f-thide">
								網易專家帶你玩轉Hadoop
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001106002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								交互設計師
						</div>
						<div class="tip f-f0 f-thide">
								網易&浙大最強交互設計導師
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001386007 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								Web安全（進階）
						</div>
						<div class="tip f-f0 f-thide">
								網絡安全高手蛻變之旅
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001405003 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								自由攝影師
						</div>
						<div class="tip f-f0 f-thide">
								攝影愛好者向專業進階
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001359002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								高級前端開發工程師
						</div>
						<div class="tip f-f0 f-thide">
								網易前端開發專家親授
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001268002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								全棧新媒體運營
						</div>
						<div class="tip f-f0 f-thide">
								成為行業搶手的新媒體人
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-28001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								自由攝影師 Plus
						</div>
						<div class="tip f-f0 f-thide">
								培養一個能賺錢的愛好
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001180001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								Python Web開發工程師
						</div>
						<div class="tip f-f0 f-thide">
								快速上手的全棧訓練營
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001122002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								測試工程師
						</div>
						<div class="tip f-f0 f-thide">
								打造最專業的測試人
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-85002 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								Java 開發工程師
						</div>
						<div class="tip f-f0 f-thide">
								浙大Java男神翁愷執教
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001227001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								Web安全工程師
						</div>
						<div class="tip f-f0 f-thide">
								“白帽子黑客”訓練營
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-85001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								獨立音樂制作人
						</div>
						<div class="tip f-f0 f-thide">
								最易懂的音樂制作課程
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001197001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								用戶研究員
						</div>
						<div class="tip f-f0 f-thide">
								網易&浙大導師帶你“讀心”
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-20001 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								MySQL數據庫工程師
						</div>
						<div class="tip f-f0 f-thide">
								網易一線DBA團隊打造
						</div>
						</a>
						</li>
						<li class="item f-fl">
						<a href="#" target="_blank">
						<div class="imgbox f-icon ux-micro-icon-1001426003 f-fl">
						</div>
						<div class="tit f-f0 f-thide">
								大數據開發工程師（Spark）
						</div>
						<div class="tip f-f0 f-thide">
								手把手帶練Spark大數據
						</div>
						</a>
						</li>
					</ul>
				</div>
				<div class="larr f-pa prev">
				</div>
				<div class="rarr f-pa next">
				</div>
			</div>
			<script type="text/javascript">		
					jQuery("#j-cntwrap").slide({
						mainCell:"#j-cntlist ul",
						autoPage:true,
						effect:"left",
						autoPlay:true,
						scroll:1,
						vis:6
					});
			</script>
		</div>
	</div>
</div>

使用聲明

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

查看演示下載資源

0 14087 60

軟件 Dreamweaver
格式 HTML
作者玫琳凱
版權 ? 原創商用（獨家） i

版權聲明

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

17素材網尊重知識產權，如知識產權權利人認為平臺內容涉嫌侵權，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網站提供的黨政主題相關內容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學習分享使用，禁止用于任何廣告和商用目的。