jquery 实现 左侧固定二级菜单导航和带左右按钮控制图片轮播滚动代码布局， 基于superslide开发的js css 分离，结构简单清晰，下载即可使用。
使用方法
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>
