jQuery基于superslide開發(fā)制作綠色寬屏的在線課程教育網(wǎng)站分類導(dǎo)航菜單和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">職業(yè)發(fā)展</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">編程開發(fā)</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">產(chǎn)品和設(shè)計</a>
<a href="#" target="_blank" class="second">軟件</a>
<a href="#" target="_blank" class="second">產(chǎn)品運營</a>
<a href="#" target="_blank" class="second">新媒體</a>
<a href="#" target="_blank" class="second">產(chǎn)品策劃</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">升學(xué)輔導(dǎo)</a>
<a href="#" target="_blank" class="second">考研</a>
<a href="#" target="_blank" class="second">STEAM</a>
<a href="#" target="_blank" class="second">小學(xué)</a>
</p>
</div>
</div>
<div class="item last">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">語言學(xué)習(xí)</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">跟劉萬祥學(xué)Excel商務(wù)圖表</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">思維導(dǎo)圖</a>
</p>
</div>
<a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">電腦基礎(chǔ)</a>
<div class="links">
<span class="seperate">|</span>
<p class="cate3links">
<a 基礎(chǔ)操作" target="_blank" href="#" class="f-f0 ">基礎(chǔ)操作</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數(shù)據(jù)分析可視化</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">向《經(jīng)濟學(xué)人》學(xué)圖表</a>
<a href="#" class="f-cb f-fc6 f-f0" target="_blank">向商業(yè)期刊學(xué)圖表</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", //鼠標(biāo)觸發(fā)對象
targetCell:".rwrap", //titCell里面包含的要顯示/消失的對象
delayTime:100, //效果時間
defaultPlay:false,
triggerTime:0, //鼠標(biāo)延遲觸發(fā)時間(默認150)
returnDefault:true //鼠標(biāo)移走后返回默認狀態(tài),例如默認頻道是“預(yù)告片”,鼠標(biāo)移走后會返回“預(yù)告片”(默認false)
});
</script>
</div>
<div class="mainnav f-cb j-navFind">
<a class="nitem f-f0" href="#" target="_self" >微專業(yè)</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>大學(xué)計算機專業(yè)</span>
</a>
<a class="f-f0 dropitem " target="_blank" href="#" >
<span>互聯(lián)網(wǎng)職業(yè)技能</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="#" >企業(yè)版</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">企業(yè)培訓(xùn)</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">
初級前端開發(fā)工程師
</div>
<div class="tip f-f0 f-thide">
網(wǎng)易一線前端工程師親授
</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數(shù)據(jù)分析師
</div>
<div class="tip f-f0 f-thide">
帶你一起用數(shù)據(jù)認識世界
</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">
產(chǎn)品經(jīng)理
</div>
<div class="tip f-f0 f-thide">
系統(tǒng)學(xué)習(xí)產(chǎn)品方法論
</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">
區(qū)塊鏈開發(fā)工程師
</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">
人工智能數(shù)學(xué)基礎(chǔ)
</div>
<div class="tip f-f0 f-thide">
精準(zhǔn)掌握人工智能核心數(shù)學(xué)
</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設(shè)計師
</div>
<div class="tip f-f0 f-thide">
網(wǎng)易設(shè)計專家經(jīng)典出品
</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">
產(chǎn)品運營
</div>
<div class="tip f-f0 f-thide">
運營大咖強強聯(lián)合
</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">
機器學(xué)習(xí)工程師
</div>
<div class="tip f-f0 f-thide">
一線機器學(xué)習(xí)專家聯(lián)合打造
</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應(yīng)用基礎(chǔ)
</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">
互聯(lián)網(wǎng)項目管理
</div>
<div class="tip f-f0 f-thide">
網(wǎng)易一線成功產(chǎn)品項目經(jīng)驗
</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設(shè)計師
</div>
<div class="tip f-f0 f-thide">
最詳盡深入的產(chǎn)品設(shè)計指導(dǎo)
</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">
大數(shù)據(jù)開發(fā)工程師
</div>
<div class="tip f-f0 f-thide">
網(wǎng)易專家?guī)阃孓D(zhuǎn)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">
交互設(shè)計師
</div>
<div class="tip f-f0 f-thide">
網(wǎng)易&浙大最強交互設(shè)計導(dǎo)師
</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">
網(wǎng)絡(luò)安全高手蛻變之旅
</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">
攝影愛好者向?qū)I(yè)進階
</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">
高級前端開發(fā)工程師
</div>
<div class="tip f-f0 f-thide">
網(wǎng)易前端開發(fā)專家親授
</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">
成為行業(yè)搶手的新媒體人
</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">
培養(yǎng)一個能賺錢的愛好
</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開發(fā)工程師
</div>
<div class="tip f-f0 f-thide">
快速上手的全棧訓(xùn)練營
</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">
打造最專業(yè)的測試人
</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 開發(fā)工程師
</div>
<div class="tip f-f0 f-thide">
浙大Java男神翁愷執(zhí)教
</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">
“白帽子黑客”訓(xùn)練營
</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">
網(wǎng)易&浙大導(dǎo)師帶你“讀心”
</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數(shù)據(jù)庫工程師
</div>
<div class="tip f-f0 f-thide">
網(wǎng)易一線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">
大數(shù)據(jù)開發(fā)工程師(Spark)
</div>
<div class="tip f-f0 f-thide">
手把手帶練Spark大數(shù)據(jù)
</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>