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.893991.com-网彩平台排行榜| www.997757.com-江苏利彩快三群| www.aj02.com-一定牛彩票网走势图| www.358707.com-彩票到手-| www.490410.com-淘宝上买彩票合法吗| www.399944.com-周三买什么彩票| www.nc5.cc-高清快三图表| www.307333.com-福利彩票快乐十分钟| www.318818.com-玩彩幸运六点半| www.238603.com-彩票漏洞骗局| www.149698.com-苏州彩票中奖记录| www.365898.cc-多大孩子可以学彩铅| www.678552.com-成都体彩官网| www.1048.pw-江苏快三太坑人| www.266662.cc-福彩一分钟-| www.255166.com-907彩票送彩金| www.354569.com-加拿大彩票中奖号码| www.472277.com-彩票小说彩票小说| www.572399.com-彩票网售最新消息| www.660415.com-完美彩票直播| www.751941.com-亚彩彩票成员名单| 500彩票www.50074g.com| www.051421.com-进球彩足彩分析| www.599821.com-多次中彩票大奖| www.010575.com-熊猫彩票信息| www.55242.cc-百利彩票app下载| www.062034.com-彩票双色球预测精准| www.21808.com-大优手机彩票平台| www.9622.org-国际色彩体系| www.443700.cc-澳门赌彩网站| www.291365.cc-3内蒙快三-| www.376933.com-彩赢助手-| www.495602.com-彩票销售问题| www.572485.com-678彩票官网下载| www.645318.com-青岛福彩一等奖| www.738188.com-金彩彩票是骗局| www.819194.com-彩票最牛方法| www.908355.com-七乐彩选号最准公式| www.973936.com-彩票361手机登陆| www.cai8801.com大发快三怎么买能赢| www.vu89.com-变态版的快三在哪玩| www.421813.com-dt大通彩票-| www.673535.com-古建室内彩画| www.043633.com-快三接龙砍龙| www.185575.com-北京福彩快三爱彩乐| www.118425.com-境外彩票网站改网址| www.023240.com-体彩怎么算中奖| www.520976.com-2元网彩票开奖查询| www.602305.com-免费彩票平台送38| www.670011.com-海南七乐彩合法吗| www.744007.cc-20分钟彩票app| www.815011.com-彩票站买黑彩判刑吗| www.896575.com-派彩走势图免费版| www.978816.com-好彩1技巧-| www.fo70.com-内蒙古福利彩票网站| www.za11.com-快乐十分钟福利彩票| www.35vb.com-五分彩是什么怎么玩| www.1606.vip-全球彩票平台| www.8476.loan-彩神争霸米聊| www.342655.com-手机购彩邀请码| www.633440.com-生肖彩票规则介绍| www.752289.com-彩票站破解版| www.26pi.com-彩82彩票平台| www.205885.com-老版一定牛彩票软件| www.614606.cc-龙胜国际彩票怎么玩| www.681357.com-中彩网客户端4.0| www.756195.com-盈彩网彩票-| www.825330.com-企鹅直播好彩频道| www.315182.com-竞彩篮球专家推荐| www.399001.com-七星彩特区论坛精选| www.475315.com-时时彩任三直选| www.598371.com-七星彩一二位差| www.700483.com-变条码彩票-| www.797979.com-易彩娱乐平台下载| www.954674.com-彩票77安卓版下载| www.2119.xyz-4月胜负彩何时开售| www.117897.com-彩富足彩网-| www.fa09.com-大发快三破解软件| www.59qz.com-体育彩票19042| www.183001.cc-体彩和值尾走势图| www.984060.com-福建快三号码统计器| www.sh69.com-体彩七-| www.16325.cc-查询福彩3d试机号| www.64748.com-竞彩让平干货| www.202489.com-双色球贵州中奖彩票| www.331272.com-高频彩开奖直播| www.816995.com-中发彩票怎么赚钱| www.83335.com-大乐透彩票分析预测| www.5262.cc-uc优彩网-| www.41869.com-中国购彩网登录地址| www.92056.com-丰彩彩票安全吗| www.69044.com-尊彩网网址谁知道| www.512375.com-彩铅这样画很美| www.578765.com-彩票店宣传单| www.278855.com-众彩彩票骗局揭秘| www.075516.com-二四六天下彩资料大| www.28054.com-168彩票手机安装| www.828775.com-天下彩票t-| www.919335.com-彩票店如何做私庄| www.983231.com-网络彩票是赌博吗| www.cp2727.com-福彩快3是什么| 奔驰彩票www.281877.com| www.kj00.com-京东彩票-| www.c31.cm-易彩线路-| www.32hm.com-58彩网站-| www.0480.vip-36o彩票一购彩| www.966700.com-五分彩的软件| www.ta26.com-彩票都有几位数组成| www.49ki.com-足彩伤停情况| www.2108.net-彩虹七号手机游戏| www.8631.com-彩视登录解决方法| www.178705.com-中国福彩app官方| www.23sj.cc-658彩票-| www.678739.com-今日竞彩必发指数| www.nw42.com-北京3分彩开奖规律| www.117854.com-彩福网-| www.233115.com-北京单场足彩| www.426012.com-香港竞彩高手谈心得| www.574381.com-戚泥丝彩票软件下载| www.641288.com-体彩标志颜色| www.711612.com-19048期七星彩| www.721157.com-我要数字彩-| www.894001.com-内蒙古快三派奖活动| www.974663.com-七星彩坛论-| www.ig71.com-湖北彩民倍投守号| www.668718.com-华人彩票网址是什么| www.740900.com-3d彩票论坛网址| www.81rj.com-长春银彩通官网| www.287992.com-福利彩票快开| www.670234.com-百度彩票网官网| www.817704.com-一彩票图谜总汇| www.648822.com-官方彩是什么情况| www.874647.com-黑彩平台信誉排行| www.966219.com-彩发发官方网站| www.aw38.com-江苏快三官方开奖| 彩天下www.196303.com| www.117973.com-幸运99彩票网官网| www.821522.com-福彩套利靠谱吗| www.887489.com-明代釉下五彩| www.838302.com-成都彩钢围挡厂| www.898223.com-香港百彩网免费资料| www.790701.com-棋牌送10彩金| www.911134.com-快三分分彩在线计划| 500彩票www.342177.com| www.123423.cc-云南彩票开奖信息| www.083185.com-悉尼快三-| www.575828.com-v9彩票真的假的| www.629961.com-网易彩票最新黄历| www.040055.com-彩票合买自导自演| www.130435.com-彩票群名称大全霸气| www.634230.com-甘肃旺豪快三| www.378449.com-幸运彩苹果系统下载| www.107931.com-金帝网络彩票| www.195985.com-江西福彩助手| www.87832.cc-体彩排例三藏机诗| www.028970.com-神州彩票官网| www.088453.com-吉林快三网络购买| www.688308.com-玩分分彩必输| www.8822.cm-分分彩算法-| www.233205.com-幸运快三app网址| www.54bn.com-凯里福利彩票中心| www.lw56.com-36选7好彩一| www.435321.com-体彩店提成收入| www.586182.com-天下彩票心水图图库|