QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jquery左侧分类导航菜单和图片轮播滚动布局代码

原创商用 jquery左侧分类导航菜单和图片轮播滚动布局代码

jquery 实现 左侧固定二级菜单导航和带左右按钮控制图片轮播滚动代码布局, 基于superslide开发的js css 分离,结构简单清晰,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
澳门足彩 www.5166.tv-韩国彩票结果查询| www.109722.com-下载六咊彩-| www.954234.com-三地彩票-| www.1177.win-幸运彩52-| www.13526.cc-大奖彩票过万必黑| www.11wm.com-快三最新公告| www.qa5.com-网上买彩票的网站| www.363253.com-羽泉彩虹伴奏下载| www.513787.com-玩彩票3分钟| www.759849.com-谁有时时彩计划网址| www.007810.com-彩票程序的原理| www.392.tv-七星彩走势图五百期| www.dk22.cc-福彩群英会-| www.867841.com-七星彩36期预测| www.356420.com-彩票不能提现追回| www.459262.com-彩票3d众彩网| www.5603.cc-h5彩票定制-| www.850915.com-极速时时彩公式集合| www.952372.com-k彩网站-| 118彩票www.62118b.com| www.js27.cc-王者彩票app| www.i50.org-河北彩票开奖大全| www.45yv.com-广东彩票20选8| www.967862.com-588彩票网官方| www.762759.com-致富彩江苏快三| www.299816.com-贷款买彩票-| www.859508.com-江西亿元彩票中奖地| www.990406.com-彩票软件大红鹰下载| www.sc34.com-分分时时彩官网下载| www.56co.com-福彩迷是真能赚钱吗| www.027028.com-英国5分彩开奖| www.904282.com-快三豹子开出迹象| www.587135.com-微彩排列5论坛| www.371455.com-654彩票-| www.455451.com-七彩德宏麻将下载| www.386701.com-六开彩开奖查询| www.416903.com-可以看彩虹台app| www.59161.com-彩票六加一开奖结果| www.084868.com-威海彩之源-| www.vu49.com-山东体彩快乐扑克三| www.zc16.com-甘肃福彩官网百度| 全民乐彩票www.2934a.com| www.963015.com-体彩绿翡翠9中奖率| www.40bk.com-潍坊彩铃-| www.67nj.com-约彩365可靠吗| www.122983.com-快三追号计划利润表| www.582220.com-足彩彩客网-| www.659422.com-高频彩开奖视频| www.732311.com-福彩中奖新闻| www.811410.com-石家庄福彩兑奖中心| www.17158.com-我要下载彩票开奖| www.365821.cc-彩铅线描画我的家| www.971419.com-体彩排3奖号| www.334566.com-网络彩票不给提现| www.493396.com-公务员开彩票店| www.wj73.com-彩票开奖大全星彩网| www.6433.vip-乐彩lc77-| www.25871.cc-巨彩led显示屏| www.78839.com-百度快乐彩走势图| www.696799.com-中国足球客彩网| www.803768.com-彩飘香篮球杀号| www.881004.com-博彩论app-| www.948962.com-网上彩票平台排行| 华夏彩票www.hx1182.com| www.769458.com-好彩头食品-| www.857118.com-神马青蛙彩开奖现场| www.937879.com-云彩厅官网-| 中彩网www.81233s.com| www.954609.com-体彩胜负彩规则| www.561379.com-e彩票手机客户端| www.636179.com-彩虹六号第二期机票| www.679389.com-彩票12安卓版下载| www.772939.com-微信申请彩金| www.850449.com-福彩3d试-| www.907035.com-福利快三显示图| www.964746.com-彩福网-| 大赢家彩票网www.83033f.com| www.36326.cc-湖北福彩兑奖中心电| www.113.live-567彩票无法提现| www.088409.com-黑龙江体彩官方网站| www.233105.com-北京福彩网开奖结果| www.539140.com-567彩票app下| www.169396.com-快三游戏-| www.219486.com-高频彩彩票-| www.847353.com-古建筑新式彩绘图案| www.817704.com-一彩票图谜总汇| www.797836.com-中彩源码-| www.852126.com-玩彩双色球预测| www.925355.com-彩票平台代理好做吗| www.cai41.cc-江苏快三开奖今天| www.eq89.com-乐彩网app首页| www.31ef.com-彩虹姐姐-| www.cp0258.com-快三平台官网下载| www.969672.com-彩票追号技巧| www.cp5778.com-彩票害死多少人| www.46rd.com-易彩银行卡怎么解绑| www.754654.com-玉泉路福利彩票站| www.841758.com-鑫彩票骗局-| www.593871.com-七彩格子理财跑路| www.673926.com-什么部门管彩票站| www.637549.com-彩票票面符号| www.196060.com-江西快三技巧| www.299608.com-陕西体彩爱彩乐| www.365818.cc-重庆时时彩双单技巧| www.186740.com-中彩官方网站| www.285963.com-亚大彩票-| www.407877.com-彩票开奖表-| www.503787.com-中福彩走势图百度| www.565408.com-南通市竞彩网点| www.630257.com-福利彩票3月21日| www.698426.com-福利彩票销售厅工资| www.770142.com-好彩投下载安装| www.836218.com-998彩票资料区| www.892035.com-幸运赛车彩票手机版| www.953001.com-广东彩灯厂-| 凤彩网www.44gpc.com| www.cp6808.com-快三跨度走势| www.957343.com-七星彩开奖30期| 818合彩www.www.8000hc.com| www.129204.com-星期五有什么彩票| www.699180.com-竞彩投注计算器| www.843342.com-体彩顶呱刮品牌口号| www.950566.com-乐彩网灵宝淘哥双胆| 中国福利彩票www.08588v.com| www.15fp.com-澳门988彩票| www.1532.cc-内快三开奖结果| www.47580.com-好彩妹口头禅视频| www.93ka.cc-彩票实体店网络卖彩| www.xs6.com-精彩十分怎么玩法| www.80ff.com-无锡福彩电话| www.de.cc-c038彩票官方版| www.719448.com-彩票玩法及规则| www.883881.com-体彩排列三四码遗漏| www.cp0958.com-快三彩票破解软件| www.of95.com-足彩网比分直播| www.579223.com-彩票两个平台套利| www.77043.com-e乐彩注册登录| www.49yh.com-彩钢板915板型| www.25254.cc-彩铅画简单入门| www.16811.cc-辽宁福彩双色球| www.3009.me-酷彩锅-| www.654934.com-全发彩票投注记录| www.726487.com-福彩快三包号计算器| www.798135.com-海南省福利彩票官网| www.863100.com-阅读更多精彩| www.579.live-支付宝买彩票靠谱吗| www.221491.com-彩90彩票信誉| www.274637.com-有没有靠谱快三| www.765644.com-一定牛体育彩票| www.833733.com-美版无嘴好彩| www.894313.com-快三追号软件下载| www.958007.com-福彩双色球走势囹| 乐彩www.le05.com| www.xc1.cc-快乐彩开奖号码| www.114434.com-足球竞彩直播500| www.705354.com-28彩票手机版| www.540744.com-1比分彩票开奖| www.598609.com-福利彩票3d号码| www.003981.com-博彩分红项目靠谱不| www.969718.com-乐彩论谈-| www.kz4.cc-快三走势分析| www.04bs.com-桃花树彩铅手绘| www.84iw.com-8848彩票大厅| www.0737.com-玩赚彩票手机版下载|