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.ke14.com-网络彩票赌博案告破| www.60kr.com-福建体彩开奖直播网| www.fi31.com-中国福利彩票贵州| www.09lq.com-看彩啦3d今天图| www.6175.biz-福彩3d玄机解码图| www.836397.com-广东好彩玩法| www.984953.com-彩运网骗局解析| www.iv67.com-合肥快三公交| www.867832.com-七星彩下期开奖号码| www.4702.top-中彩网61233| www.98df.com-蓝色炫彩壁纸| www.583503.com-高频彩走势图新浪| www.663553.com-下载百度彩票app| www.504563.com-踩台和彩排是一样吗| www.554071.com-晨兴彩票手机版| www.008571.com-胜负彩19039期| www.33ep.com-m8彩票登录-| www.8336.in-凤凰快三网址| www.iw97.com-足球竞彩推荐| www.912093.com-正德体彩店app| www.760877.com-彩礼钱是什么意思| www.941133.com-中国体彩票图片| www.cj02.com-极速快三软件下载| www.1100.tv-乐彩网排三预测| www.449646.com-竞彩十四场-| www.731760.com-8k彩票进入网址| www.718691.com-雨后彩虹代表的意思| www.824362.com-福彩3d直播现场| www.929579.com-彩8800彩票-| 万达彩票www.616383.com| www.386970.com-类似m5彩票的平台| www.91693.cc-炫彩手工联盟骗局| www.4681.vip-3d家彩网独胆| www.16211.cc-竞彩网pc版-| www.a08.cn-网络彩票快三骗局| www.zk67.com-快三买和值怎么玩| www.230060.com-杀姐姐看彩预测3d| www.7412.vip-色彩斑斓的近义词| www.008659.com-第19029期体彩| 金掌柜www.83993c.com| www.758196.com-网上彩票计划可靠吗| www.sh96.cc-0500时时彩下载| www.ua06.com-彩票达人合法吗| www.801836.com-巴西老人中彩票| www.61114.com-01cc第一彩票| www.765469.com-众发彩票-| www.897833.com-卖彩票的广告词| www.960734.com-彩票天天签到送彩金| 幸运彩票www.669307.com| www.99904.cc-拉菲装饰彩票注册| www.092238.com-福建体彩36选7| www.089756.com-买中国体育福利彩票| www.090965.com-杭州体彩兑奖中心| www.399233.com-海南七星彩坛论| www.577085.com-好彩i门户软件下载| www.671650.com-排列五中奖彩票图片| www.818324.com-兰州体彩机申请| www.98765.com-甘肃福彩3d太湖继| www.155335.com-彩票靠谱计划| www.nv0.com-彩票河南快3| www.60if.com-足彩和蓝彩哪个好中| www.74fo.com-中彩500网-| www.254077.com-怎样下载彩票软件| www.n74.cn-彩票如何看懂走势图| www.815299.com-排列5福彩-| www.1841.vip-南国彩票天涯论坛| www.58194.com-江苏省快三遗漏数据| www.015771.com-海南七星彩投注网址| www.345195.com-忆彩彩票下载安装| www.474892.com-澳客500网彩票| www.557901.com-买福彩快三开奖结果| www.166452.com-中国快三大全网| www.280496.com-计划网时时彩全天| www.388810.cc-福彩三的魔鬼图片| www.544113.com-038期彩报第38| www.637413.com-我附近的彩票| www.15ig.com-徐州彩礼什么时候给| www.338459.com-永诚彩票网-| www.358795.com-新浪彩票2018版| www.507344.com-星光彩票能赢钱吗| www.93881.cc-七乐彩五期选号法| www.65za.com-198彩总代官方| www.2608.cc-福建体育彩网| www.032244.com-cc彩球网国际平台| www.139824.com-彩38彩票注册下载| www.769252.com-彩票刷负盈利| www.846612.com-福彩今晚的开奖号| www.912291.com-红神体彩网的网址| www.979940.com-彩票店打票员工资| www.cp4567.com-uu快三平台-| www.jq31.com-好运时时彩开奖结果| www.yl22.cc-彩票投注站网上缴费| www.0808.date-138彩票下载安装| www.626.date-彩票佣金任务| www.048877.com-福彩3d布衣钱树图| www.128103.com-大发快三移动彩票| www.ij74.com-官方福利彩票软件| www.543586.com-彩票大王两次五百万| www.602175.com-火车站买彩票| www.658400.com-福彩电话客服电话| www.711156.com-刷彩算是赌博吗| www.779496.com-彩迷是什么意思| www.6909.vip-七彩格子怎么样| www.jn07.com-彩票帮投是骗局吗| www.y30.club-福利彩票8官方网站| www.cr24.com-怎样加盟彩票投注站| www.210737.com-吉林长春快三开奖| www.bh49.com-神州彩票网-| www.680956.com-七星彩怎么做代理| www.353599.com-负责任博彩-| www.6033.cm-昭通彩票中奖者| www.24464.com-彩铅星空画-| www.qm90.com-时时彩买大小规律| www.967073.com-买三d彩票的技巧| 51彩票www.751898.com| www.ki10.com-完整版竞彩完场比分| www.935107.com-ios玩彩票的软件| www.969485.com-宝赢彩票软件下载| www.911502.com-铁公鸡彩票奖表下载| www.184712.com-黑龙江好彩快3| www.149144.com-主流彩票-| www.240163.com-五分彩万位计划公式| www.355080.com-玩彩有什么规律嘛| www.496677.com-宝马彩票平台q| www.409426.com-浙江体彩飞鱼走势图| www.381652.com-泰安彩票店转让| www.dp78.com-上海快三遗漏数据| www.h67.cc-福彩3d销售返点| www.679.cm-福彩三d鑫鑫预测| www.639702.com-移动彩票靠谱吗| www.476033.com-彩票倍投为什么不出| www.566780.com-福彩3d旦码高手| www.6939.biz-彩票任选玩法| www.43707.com-苹果4彩膜-| www.007344.com-标准体彩竞彩店转让| www.576645.com-购彩v下载安装| www.644420.com-华亿彩票靠谱吗| www.729419.com-博彩88-| www.795566.com-福利彩票兑奖结| www.863876.com-彩票机选有猫腻| www.918803.com-顶级信誉博彩| www.969799.com-最新彩票信息网| 500彩票www.52072s.com| www.tt29.cc-火星彩票主页| www.569895.com-彩票顺子什么意思| www.94423.com-体彩竞彩篮球开奖| www.571752.com-时时彩后二技巧绝密| www.454158.com-乐彩为什么不能提现| www.558471.com-彩铅作品简单| www.cai80.cc-吉林省快三开奖| www.415789.com-七彩阳光音乐下载| www.554924.com-腾讯出售华彩控股| www.613925.com-大马彩4d-| www.139038.com-福彩3d去哪兑奖| www.34094.com-3b彩吧开机号| www.075373.com-腾讯彩票官网下载| www.241994.com-七星彩奖怎么看| www.tc58.cc-关于彩票个性网名| www.152407.com-天天福彩3d-| www.mv59.com-彩报王-| www.t09.com-梦见彩票中13万| www.355233.com-体彩大乐透大奖排名| www.uy31.com-时时彩倍投注方法| www.179788.com-七星彩玩法技巧|