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>