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.976500.com| www.29fs.com-彩铅画海底世界| www.3344.biz-k7彩票app-| www.9868.cn-做彩票业绩怎么抓| www.88986.cc-福利彩票店转让合同| www.058959.com-新浪体育彩票网| www.196985.com-彩神app-| www.281988.com-中国快三线上平台| www.390773.com-七星彩源码购买| www.549432.com-港澳泰直播48彩网| www.654781.com-彩票前三-| www.749928.com-分分彩票投注软件| www.822803.com-体彩彩票电子票号| www.910230.com-彩报忠心-| www.992977.com-精彩资讯-| www.lt92.com-安徽好彩快三| www.p93.cc-爱投彩票提现不到账| www.63mt.com-广州羊城晚报好彩版| www.2381.biz-搜神传好彩妹变老| www.18733.cc-吉林快三测大小单双| www.71879.com-彩票中奖领奖流程| www.128919.com-福彩3d综合分布图| www.219423.com-福彩61走势图| www.306410.com-足彩分析app| www.387420.com-彩膜怎么做-| www.545360.com-微信国际彩票投资| www.673097.com-七星彩中奖在哪里领| www.768143.com-海外彩票网站| www.890662.com-南方双彩网开机号| www.969445.com-凤凰彩票输了很多钱| www.am28.cc-快三号码和值图片| www.vc80.com-青岛彩票中大奖者| www.22ug.com-合一彩票测速| www.206552.com-神舟彩票网址| www.331507.com-七乐彩票官网| www.447430.com-福彩票三滴-| www.575077.com-淘彩网是官网吗| www.112888.com-台湾快三开奖直播| www.267411.com-竞彩2串一-| www.409559.com-大花猫3d彩报图| www.525027.com-腾讯分分彩百度贴吧| www.622338.cc-逆袭分分彩做号工具| www.697686.com-时时彩总和大小技巧| www.780496.com-亚博阿里彩票官网| www.863575.com-彩票投注接口| www.977908.com-多多中彩票-| www.h39.club-七星彩在哪兑奖| www.78vg.com-极速快三立即开机| www.5259.cc-类似派彩网-| www.13016.cc-竞彩比分中国澳客网| www.58882.com-彩票游戏机样泡泡| www.048523.com-赢钱彩合法吗| www.133440.com-彩色路面施工工艺| www.212783.com-信誉最好的黑彩平台| www.310248.com-国家体彩中心主任| www.382648.com-19027胜负彩| www.537068.com-关于体彩的微信头像| www.623639.com-三星彩票下载安装| www.697080.com-足彩虚拟投注软件| www.776778.com-彩神通软件手机版| www.881473.com-网上平台彩票合法吗| www.964653.com-6701彩票网下载| 淘彩票www.tcp969.com| www.iq89.com-乐乐彩合法吗| www.a13.cn-彩票破解计算| www.27sa.com-491cc彩票一让| www.0453.loan-金多彩网站-| www.7013.vip-力彩电子-| www.21495.com-彩票网站打不开咋办| www.63613.com-足彩竞彩交易量| www.036585.com-福彩快乐彩玩法| www.123684.com-七彩奖下载-| www.195785.com-江西福彩中心电话| www.267000.com-彩票是骗局揭秘| www.368711.com-彩票与生活庄子说梦| www.hb9.cc-安徽快三遗漏走势图| www.ou63.com-福彩三地振幅走势图| www.8dy.cc-体彩排列五中奖金额| www.70bh.com-害人的体彩1l选5| www.1043.me-广东十一选5爱乐彩| www.8871.vip-云南福彩3d彩民| www.42864.com-信誉好的彩票投注网| www.88297.com-彩民彩票是真的吗| www.041042.com-彩票小程序-| www.141151.com-老猫看彩3d断组| www.220168.com-老版彩神8-| www.289809.com-彩票app苹果版| www.455946.com-彩票中大奖的人| www.543177.com-骰子快三走势图| www.653584.com-强胆推荐竞彩网| www.737966.com-香港意大利彩金价值| www.808122.com-网络时时彩赌博举报| www.878636.cc-双色球彩票规则玩法| www.964544.com-8福彩票-| 6678彩票www.2688cai.com| www.ck84.com-吉林省体彩11选5| www.ss39.com-台湾时时彩开奖记录| www.16ny.com-福彩天天开吗| www.95nd.com-多彩投非鱼-| www.2588.site-彩票一等奖高手| www.8328.cn-七星彩码仙每期说规| www.28116.com-常州彩票中奖排行| www.71476.com-跟着群里买彩票| www.072106.com-彩票中奖者的自述| www.133624.com-8亿彩苹果版下载| www.204597.com-5分快三-| www.270926.com-彩94app-| www.378348.com-万豪彩票助手怎么样| www.495600.com-博彩app假-| www.562375.com-彩71专业彩票| www.626527.com-彩民彩票软件合法吗| www.691489.com-最可靠的彩票app| www.764896.com-体育彩票送彩金| www.881503.com-高频彩的概率玩法| www.948030.com-彩票店的利润分成| www.987093.com-乌鲁木齐快三| www.cp326.com-下载湖北快三走势图| www.km70.com-易彩集团软件靠谱吗| www.b65.cn-5分彩计划-| www.24vq.com-怎么破解网投彩票| www.763.xyz-网上买彩票群| www.4195.org-七彩凤凰教育网| www.9082.pw-世界杯体彩暂停销售| www.52697.cc-下载好彩0567| www.92209.com-好彩玩法技巧| www.042777.com-足彩怎么不能买| www.135063.com-黄金叶七彩烟多少钱| www.205321.com-内蒙古体彩兑奖地址| www.270081.com-132彩票经典版| www.365469.cc-油性玫瑰彩铅画教程| www.444671.com-家彩票-| www.526961.com-河内五分彩官网开奖| www.621761.com-彩神vii下载注册| www.683763.com-彩票容易中吗| www.754007.com-搜狗彩票平台网址| www.851862.com-内蒙快三综合版| www.907071.com-福彩快三计划网页版| www.965486.com-黑龙江福彩网官网| 68彩票www.68682q.com| www.co36.com-彩客网提款提不出| www.si78.com-福彩店经营心得| www.12sb.com-彩帝彩票怎么样| www.74km.com-环球一号彩票正规吗| www.0768.win-竞彩推荐行业赚钱| www.8075.org-中国水彩画大师排名| www.23249.com-903彩票app-| www.60103.com-福彩中心新规定| www.024763.com-体彩中奖规则图片| www.088633.com-天天彩是真的假的| www.142460.com-258竞彩app-| www.208800.com-彩票术语砍龙| www.272955.com-体育彩票有几种| www.385980.com-彩票排列五玩法| www.499048.com-出售时时彩私彩网站| www.561600.com-怎么用手机买七星彩| www.620069.com-易中彩票官网| www.679122.com-鳯凰竟彩-| www.745605.com-大彩网不更新| www.804076.com-彩票平台二维码| www.870188.com-福彩3d组选胆拖| www.cp0024.com-快彩-| www.ja54.com-皇元彩票是真是假| www.ya42.com-韩国快三走势| www.10ap.com-译酷彩-|