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>
