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.t63.cn-a6118彩票安卓| www.9yd.cc-买体彩犯法吗| www.488528.com-新浪彩票网电脑| www.831510.com-福彩双色球免费软件| www.941787.com-湖北快三开结果| 亚洲www.673519.com| www.k34.xyz-3d彩吧网-| www.2793.top-0567好彩官网| www.96513.com-开竞猜型体育彩票| www.77662.cc-cp彩票36·cm| www.290918.com-快三开奖时间段| www.028183.com-彩票代码是啥| www.168630.com-时时彩96-| www.404069.com-彩铅画入门教程书籍| www.552711.com-江苏快三解绑银行卡| www.633325.com-竞彩篮球彩票不会看| www.722709.com-足彩负其他什么意思| www.16042.com-七乐彩开奖中奖规则| www.87438.com-98彩票网是真的吗| www.546159.com-中国福彩在线加盟| www.639441.com-彩票站买假刮刮乐| www.949605.com-百亿时彩票-| www.dr65.com-大发快三开挂辅助器| www.14rc.com-易彩乐的邀请码| www.369409.com-厦门福彩快三开奖| www.510125.com-彩票倍投还是平投| www.582169.com-阳光彩票注册登录| www.661475.com-黑彩返点计算公式| www.738889.com-江苏快三微信群跟买| www.812550.com-新彩网。-| www.877739.com-六台彩迷宫12| www.949838.com-彩票周周签到| 百姓彩票www.bxcp3.com| www.9796.top-七星彩有效期多久| www.604979.com-大乐彩今日还没开奖| www.688058.com-彩票天天中安装| www.773942.com-正好彩票网11选5| www.869568.com-七星彩进入网站| www.ry19.com-快三秒奶茶经营模式| www.14hc.com-彩经网福彩走势图| www.948450.com-体彩实体店哪个靠谱| www.cp197.cc-大发快三登录平台| www.to58.com-彩票接口api| www.353048.com-七采彩开奖结果| www.445198.com-爱彩人彩票网官网| www.30320.com-大连大乐透中奖彩民| www.d18.red-彩票开奖3d开奖号| www.926185.com-福建体彩31选7一| www.990027.com-快三大全app| www.ch91.com-极速快三规律技巧| www.517082.com-有攻击黑彩网黑客吗| www.119160.com-山东福彩中心电话| www.721773.com-北京福彩3d微信群| www.903969.com-大发彩票客服| www.982407.com-鸿彩是真是假| www.296095.com-易彩快3走势怎么看| www.128513.com-好的彩票平台| www.256138.com-快三拉花教学慢动作| www.313.cm-领航彩票网站源码| www.5174.biz-大白菜彩金-| www.233092.com-彩票投注机选| www.302393.com-福彩3d和值连线图| www.186743.com-青海快三今日开奖号| www.266268.com-三分快三下注平台| www.334003.com-彩票正规网站| www.660604.com-高频彩联盟官网| www.731618.com-易彩集团是不是真的| www.822682.com-659乐彩网-| www.749520.com-牛硅彩票开奖现场| www.210966.com-五分快三是彩票吗| www.312628.com-快购彩平台怎么样| www.57yb.com-彩票机出租或转让| www.0580.cn-明代釉下五彩瓷| www.502596.com-在武汉哪里买彩票| www.633116.com-网络打彩票什么意思| www.714783.com-福彩五分彩全天计划| www.065208.com-彩铅画图片简单卡通| www.1421.xyz-香港博彩堂六六信息| www.2820.in-好彩店彩票网页版| www.16020.com-中国福利彩票彩吧图| www.080206.com-满堂彩官方网| www.3772.xyz-南国彩票排列五| www.28932.cc-网上彩票是合法的吗| www.005407.com-珠江彩票骗人| www.7450.cc-游泳彩票玩法| www.622915.com-传奇彩票是赌博| www.64uf.com-新浪分分彩app| www.426252.com-高人分析彩票| www.583888.cc-彩虹社交app| www.659554.com-境外足彩平台| www.772732.com-吉利的彩票群名| www.834654.com-好彩蓝莓双爆多少钱| www.894905.com-全国最正规彩票网站| www.962354.com-1号彩票网app| 大赢家彩票网www.54400k.com| www.285509.com-湖壮快三一定牛预测| www.062567.com-淘宝彩票官方网站| www.174734.com-网络快三能不能玩| www.670127.com-体彩7位数开奖| www.21517.cc-达芬奇密码彩票图表| www.a35.org-广西快三单双预测| www.223452.com-人人快三合法吗| www.532957.com-福彩开彩时间| www.492600.com-手机七彩灯软件| www.341499.com-四季彩票安全吗| www.1mp.cc-彩票平台可以对压吗| www.ti14.com-520彩票官方网站| www.109310.com-金利彩票大厅| www.89715.com-19032期足彩| www.074507.com-金彩网可信吗| www.69ih.com-福彩坊-| www.2226.in-微彩论坛排列5| www.410813.com-苹果版唯彩会| www.527234.com-八百万彩票网| www.05693.com-玖玖网彩票-| www.525360.com-快三贵阳彩票走势图| www.805893.com-刮刮奖福利彩票| www.308877.com-彩票排行榜-| www.148169.com-从中一亿彩票开始| www.00jr.com-描写彩虹鸽的好词| www.0416.pro-福彩3d金码10期| www.7243.net-彩虹糖果小豆机| www.839633.com-福利彩票贵州站| www.936127.com-爱彩彩票可靠么| www.994447.com-买彩票技巧顺口溜| www.in15.com-福利彩票怎么买| www.22ep.com-588cc彩票网| www.65565.com-3d福彩太湖-| www.015743.com-七星彩有什么软件| www.126134.com-手机万豪彩票合法吗| www.234484.com-现在怎么买足彩| www.202695.com-彩35下载-| www.4212.biz-七彩汇娱乐苹果| www.169894.com-贵州快三形态走势图| www.266922.com-tkcc天空彩票| www.347511.com-彩厍宝典下截| www.mu26.com-彩报库图-| www.079651.com-彩票双色球复式计算| www.329792.com-彩票支票-| www.9877.cc-汇丰娱乐彩票| www.94093.com-500足彩比分直播| www.1ai.com-七乐彩幸运走势图| www.89cv.com-竞彩胜负比分查询| www.r87.net-福彩3d777彩报| www.088236.com-足彩310彩客| www.185085.com-福彩快三彩票江苏| www.245296.com-易彩快3精准计划| www.943655.com-今晚六会彩开奖生肖| 亚洲www.527477.com| www.814248.com-金豪国际娱乐彩票| www.769352.com-体彩竞彩中奖查询| www.338239.com-贾峪彩票中奖| www.446433.com-彩票网能提现不| www.071946.com-彩色透水混凝土报价| www.113300.com-qq好友让玩彩票| www.338811.com-谦喜彩票登录页| www.930800.com-8亿彩官网-| www.329185.com-湖北福彩3d开奖| www.393141.com-彩铅山水画图片大全| www.270515.com-日本彩票销售下降| www.505273.com-竞赢彩票是什么| www.486258.com-5分极速彩票| www.8904.loan-竞彩比分4串1中奖| www.0028.site-8位数字的湖北彩票|