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.237407.com-极速快三开奖信息| www.056453.com-网上彩票app下载| www.44za.com-上海近10期快三| www.4584.vip-福利彩票如何选| www.508449.com-同乐彩票网址| www.134379.com-福体彩开奖话题页| www.619052.com-山东省体彩中心新址| www.hn73.com-湖北福彩快三3同号| www.761021.com-二分时时彩一期计划| www.905135.com-体育彩票可以过户| www.cp1160.com-分分快三计划单| www.g36.cc-19年彩票新规| www.328240.com-福彩3d分析与预测| www.116477.com-分析彩票数据有用吗| www.10668.com-足彩实时欧赔| www.61177.com-网售彩票怎么举报| www.040932.com-乐彩赢app-| www.129098.com-福彩一个星期开几次| www.834178.com-日本好彩香烟| 新盈彩www.xinyc2.com| www.583190.com-彩色简笔画风景| www.757076.com-什么是选三型彩票| www.925182.com-彩代表什么生肖| www.fe33.com-北京体彩排列五| www.110238.com-福彩3d怎么买法| www.662075.com-彩票双色球出号规律| www.34.cm-大数据能分析彩票么| www.870763.com-广东省福彩中心地址| www.440857.com-中国福彩三地之家| www.954124.com-福建体彩11选| www.026372.com-彩票网站搭建成本| www.90rh.com-足球博彩的传奇人物| www.48515.com-重庆时时彩安卓| www.080561.com-破解彩票平台软件| www.464615.com-六开彩怎怎么玩| www.634655.com-3d彩跨度有多少组| www.723058.com-家彩网双色球开机号| www.803196.com-彩票微信群名称大全| www.873802.com-彩31彩票下载| www.947392.com-福彩七加二多少钱| 彩客www.ck09.com| www.cai788.com-大发快三精准计划| www.001620.com-太湖钓叟字谜新彩网| www.127907.com-周杰伦彩虹在线试听| www.865775.com-熊猫彩票怎么下载啊| www.937535.com-7125彩票软件| www.986270.com-三d彩票的买法| www.ug9.cc-百宝彩票快3| www.773252.com-近两年彩票中奖号码| www.852519.com-福彩电话投注方法| www.914100.com-全民中彩票快三| www.975212.com-开心100彩票| www.cp03.com-福利彩票查询| www.981740.com-大中华网络彩票| www.dx82.com-网络彩票最新消息| www.704633.com-福利彩票助手| www.017210.com-彩票店一般几点关门| www.121790.com-举报时时彩电话| www.78jr.com-时时彩后三全天计划| www.768798.com-快三投注倍投计划| www.960734.com-彩票天天签到送彩金| www.051008.com-快三能挣钱吗| www.255689.com-时时彩五星单式规律| www.118313.com-体彩排列三彩吧预测| www.277857.com-彩票坊官方下载| www.620200.com-如意彩票网安全吗| www.954794.com-瑞彩祥云破解器| www.xv1.com-彩神大发快3计划| www.wt69.com-彩票指南电子版买彩| www.22ps.com-159彩票怎么了| www.852693.com-贵州多彩宝app| www.972453.com-河北彩票开奖大厅| www.cai8977.com7星彩预测-| www.549896.com-大发快三倍投计划图| www.89571.com-577彩票安卓| www.104652.com-金牛彩票平台| www.ag69.com-手机福彩网-| www.94og.com-溴客彩票网-| www.aa.cc-湖北快三昨天没出号| www.931609.com-论坛山东体彩论坛| www.mk02.com-福彩快三坑了多少人| www.526941.com-体育彩票开桨结果| www.666932.com-e乐彩登录手机| www.865629.com-彩票分析预测免费| www.990113.com-三地预测总汇多彩网| www.mc59.com-爱彩乐快乐十分钟| www.511777.cc-彩票助赢网-| www.73016.cc-彩8官方网站下载| www.195711.com-河南省快三走势图人| www.861488.com-乐彩app下截| www.930190.com-竞彩篮球彩票的玩法| www.cp5153.com-上海快三技巧规律| www.48nf.com-80彩票软件靠谱吗| www.8809.pw-泉州体彩直播聊天室| www.391713.com-彩票正规app| www.523622.com-时时彩手机版| www.9980.top-福彩3d彩吧图今天| www.178628.com-新3彩票平台| www.851355.com-淘宝网上怎么买彩票| www.923861.com-cp彩票网页版| www.978756.com-快三统计软件| www.cp8322.com-体彩卩3走势图| www.55ff.com-pk彩票下载-| www.414361.com-93彩票app网址| www.627153.com-彩票视频直播| www.752956.com-私彩老板-| www.261098.com-亚洲彩票是不是真的| www.382093.com-老公经常借钱买彩票| www.517652.com-七乐彩开机号查询| www.593440.com-七彩红包是真的吗| www.662809.com-竞彩投资最佳方案| www.751828.com-宁德体彩管理中心| www.817068.com-福利彩票世界杯| www.900379.com-粤淘彩票app| www.965397.com-悟空彩票是合法的吗| 大众彩票www.712887.com| www.401655.com-彩客站aqq-| www.921388.com-彩票中奖走奇门| www.988084.com-彩民乐3d-| www.rx7.com-上海快三五百期| www.0971.biz-彩票倍投方式| www.981468.com-福利彩票3d单式| www.qj8.cc-浙江福彩导航| www.01066.cc-彩之网开奖结果| www.230621.com-搜索728彩票| www.81840.com-时时彩冷热号规律| www.333331.cc-网络彩票输了| www.6633.vip-牛彩网3d字谜汇总| www.25464.com-彩铅少女画-| www.zf34.com-时时彩网下载手机版| www.907016.com-彩票有11位数字| www.40645.com-世界杯足彩澳门盘口| www.39897.cc-彩票巴士在线| www.349993.com-体彩屋快三-| www.679590.com-0165彩票app| www.241105.com-牛彩网站-| www.097883.com-双色球预测大师旺彩| www.3316.vip-华宇装潢彩票怎么样| www.557692.com-牛彩网双色球字图| www.656512.com-有没有幸运时时彩| www.750471.com-福彩宝下载-| www.829955.com-盛大彩票下载安装| www.896644.com-篮球博彩规则| www.953159.com-用手机买彩票安全吗| 福利彩票www.flff2.com| www.3gc.cc-彩票几日不领会作废| www.941779.com-河北体彩佣金是多少| 网购彩票www.cp7777b.com| www.e91.me-福彩开奖号码3d| www.213635.com-足彩分析师培训| www.756405.com-盛兴彩票4848| www.861815.com-时时彩qq群推广| www.918510.com-重庆福彩中心地址| www.976400.com-江苏各地彩礼一览表| 冠赢彩票www.606187.com| www.ls22.cc-盛兴彩票官网| www.b68.space-江西体彩江西福彩网| www.84pu.com-福彩3d牛材网ok| www.517385.com-职业高频彩-| www.548789.com-95彩网-| www.054836.com-彩票10-| www.820.vip-体育彩票专线宽带| 九州彩票www.cc6769.com| www.766365.cc-时时彩充值有优惠|