QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jquery室内设计网站导航和图片滚动布局代码

原创商用 jquery室内设计网站导航和图片滚动布局代码

jquery 实现左右轮播滚动以及左侧导航菜单效果布局,基于superslide开发,jquery均有注释,参数可修改,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代码

<div class="des-menu-nav">
	<div class="des-nav-box">
		<dl>
			<dd class="cur">
				<h3>
					<a href="#">首页</a>
				</h3>
			</dd>
			<dd>
				<h3>
					<a href="#">精选家装</a>
				</h3>
				<ul>
					<li>
						<a href="#">家装图库</a>
					</li>
				</ul>
			</dd>
			<dd>
				<h3>
					<a href="#">精选工装</a>
				</h3>
				<ul>
					<li>
						<a href="#">工装图库</a>
					</li>
				</ul>
			</dd>
			<dd>
				<h3>
					<a href="#">找设计师</a>
				</h3>
			</dd>
			<dd>
				<h3>
					<a href="#">名家汇</a>
				</h3>
				<ul>
					<li>
						<a href="#">案例解析</a>
					</li>
					<li>
						<a href="#">人物专访</a>
					</li>
				</ul>
			</dd>
			<dd>
				<h3>
					<a href="#">有问必答</a>
				</h3>
			</dd>
		</dl>
		<dl class="fr">
			<dd>
				<h3>
					<a href="#">设计师专区</a>
				</h3>
				<ul>
					<li>
						<a href="#">3DMAX模型下载</a>
					</li>
					<li>
						<a href="#">设计资讯</a>
					</li>
					<li>
						<a href="#">人脉广场</a>
					</li>
					<li>
						<a href="#">空间谈</a>
					</li>
				</ul>
			</dd>
		</dl>
		<div class="des-column">
			<div class="des-column-list">
				<div class="hd des-column-head">
					<ul>
						<li class="item">
							<h2>家装设计</h2>
							<div class="des-column-link">
								<a href="#" class="des-red">三居</a>
								<a href="#" class="des-red">小户型</a>
								<a href="#">别墅豪宅</a>
								<a href="#" class="des-red">复式</a>
								<a href="#">样板房</a>
								<a href="#">日式</a>
								<a href="#" class="des-red">北欧</a>
								<a href="#">地中海</a>
								<a href="#" class="des-red">中式</a>
								<a href="#" class="des-red">现代</a>
								<a href="#">混搭</a>
								<a href="#" class="des-red">美式</a>
							</div>
							<ul class="product-wrap product-wrap001">
								<li>
									<h2>户型</h2>
									<div class="des-column-link">
										<a href="#">小户型</a>
										<a href="#">二居</a>
										<a href="#">三居</a>
										<a href="#">四居</a>
										<a href="#">复式</a>
										<a href="#">别墅豪宅</a>
									</div>
								</li>
								<li>
									<h2>风格</h2>
									<div class="des-column-link">
										<a href="#">欧式</a>
										<a href="#">中式</a>
										<a href="#">新古典</a>
										<a href="#">东南亚</a>
										<a href="#">美式</a>
										<a href="#">田园</a>
										<a href="#">地中海</a>
										<a href="#">现代</a>
										<a href="#">混搭</a>
									</div>
								</li>
							</ul>
						</li>
						<li class="item">
							<h2>工装设计</h2>
							<div class="des-column-link">
								<a href="#" class="des-red">餐厅设计</a>
								<a href="#" class="des-red">休闲会所</a>
								<a href="#">办公室设计</a>
								<a href="#" class="des-red">主题酒店</a>
								<a href="#">娱乐空间</a>
								<a href="#">商业展示</a>
								<a href="#" class="des-red">购物中心</a>
								<a href="#">教育机构</a>
								<a href="#" class="des-red">医疗机构</a>
							</div>
							<ul class="product-wrap product-wrap002">
								<li>
									<h2>类型</h2>
									<div class="des-column-link">
										<a href="#">酒店空间</a>
										<a href="#">购物空间</a>
										<a href="#">文化空间</a>
										<a href="#">商业展示</a>
										<a href="#">医疗机构</a>
										<a href="#">办公空间</a>
										<a href="#">餐饮空间</a>
										<a href="#">娱乐空间</a>
										<a href="#">休闲场所</a>
										<a href="#">售楼中心</a>
										<a href="#">金融机构</a>
										<a href="#">运动场所</a>
										<a href="#">教育机构</a>
									</div>
								</li>
							</ul>
						</li>
						<li class="item item-clear">
							<h2>室内设计师</h2>
							<div class="des-column-link">
								<a href="#" class="des-red">设计本网站在线交易流程及服务保障>>></a>
								<a href="#" class="des-red">北京</a>
								<a href="#">上海</a>
								<a href="#" class="des-red">深圳</a>
								<a href="#">台湾</a>
								<a href="#">别墅</a>
								<a href="#" class="des-red">会所</a>
								<a href="#">酒店</a>
								<a href="#" class="des-red">餐厅</a>
								<a href="#" class="des-red">办公室</a>
							</div>
							<ul class="product-wrap product-wrap003">
								<li>
									<h2>所在城市</h2>
									<div class="des-column-link">
										<a href="#">北京</a>
										<a href="#">上海</a>
										<a href="#">广州</a>
										<a href="#">深圳</a>
										<a href="#">南京</a>
										<a href="#">天津</a>
										<a href="#">杭州</a>
										<a href="#">武汉</a>
										<a href="#">成都</a>
										<a href="#">西安</a>
										<a href="#">福州</a>
										<a href="#">苏州</a>
										<a href="#">郑州</a>
										<a href="#">合肥</a>
										<a href="#">贵阳</a>
										<a href="#">宁波</a>
										<a href="#">长沙</a>
									</div>
								</li>
								<li>
									<h2>擅长空间</h2>
									<div class="des-column-link">
										<a href="#">家居住宅</a>
										<a href="#">别墅豪宅</a>
										<a href="#">办公室</a>
										<a href="#">酒店</a>
										<a href="#">餐厅</a>
										<a href="#">咖啡厅</a>
										<a href="#">酒吧</a>
										<a href="#">KTV</a>
										<a href="#">商业展示</a>
										<a href="#">医院</a>
										<a href="#">幼儿园</a>
										<a href="#">会所</a>
										<a href="#">样板房</a>
										<a href="#">售楼处</a>
										<a href="#">文化空间</a>
										<a href="#">运动空间</a>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="des-banners">
	<div class="hd des-banners-circle">
		<ul>
			<li class="on"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="bd des-banners-image">
		<ul>
			<li class="des-banners-image-001">
				<a href="#"></a>
			</li>
			<li class="des-banners-image-002">
				<a href="#"></a>
			</li>
			<li class="des-banners-image-003">
				<a href="#"></a>
			</li>
			<li class="des-banners-image-004">
				<a href="#"></a>
			</li>
			<li class="des-banners-image-005">
				<a href="#"></a>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript">

	$(function(){//左侧二级菜单

		$('.des-column-head .item').hover(function(){

			$(this).addClass('active').find('s').hide();

			$(this).find('.product-wrap').show();

		},function(){

			$(this).removeClass('active').find('s').show();

			$(this).find('.product-wrap').hide();

		});

	});

	jQuery(".des-banners").slide({//首页轮播
		mainCell: ".bd ul",
		effect: "leftLoop",
		autoPlay: true,
		trigger: "click",
		delayTime: 700
	});

	jQuery(".des-menu-nav").slide({//导航二级菜单
		type: "menu",
		titCell: "dd",
		targetCell: "ul",
		delayTime: 0,
		defaultPlay: false,
		returnDefault: true
	});

</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩乐分析 www.9136.cn-七乐彩2000-| www.we00.com-兰州体育彩票中心| www.2014.in-彩虹6号配置需求| www.so59.com-五星彩网站平台| www.50994.com-93彩票靠谱吗| www.16077.cc-七彩乐怎么玩| www.79rt.com-腾讯分分彩互刷| www.zm4.cc-5d彩票规则介绍| www.170898.com-吉林快三出奖结果| www.53785.cc-三分时时彩怎么玩法| www.030305.com-90在线九龙彩票| www.112317.com-彩票注册送10元| www.cj94.com-乐彩5分快3-| www.221463.com-手机彩票开挂| www.837512.com-快三概率-| www.299149.com-如何看彩票走势大小| www.442113.com-分分彩后三包胆稳赚| www.560519.com-吉林省彩票-| www.200389.com-南方彩票双彩网| www.53379.cc-老时时彩走势360| www.800789.cc-我梦见彩票中奖号码| www.919219.com-彩票app软件定制| www.wt73.com-快三投注计划图表| www.77yn.com-购买境外足彩| www.792163.com-福彩中心领奖地址| www.ld5.cc-e球彩常用奖金表| www.04en.com-黑彩快三抽水子判刑| www.95es.com-足彩胆选多了好不好| www.215990.com-众赢彩票骗局| www.455490.com-聚彩手机网址导航| www.818866.com-邢台体彩中心地址| www.889156.com-高频彩伪规律| www.961028.com-时时彩止损倍投| www.cp8332.com-好河南快三开奖结果| www.ph80.com-体彩排列三彩吧助手| www.04lx.com-水溶彩铅使用方法| www.76ad.com-澳洲五分彩骗人| www.1506.me-彩虹儿童歌曲| www.kg28.cc-8号彩票论坛| www.25rv.com-7星彩开奖号码47| www.669840.com-四个数的彩票| www.801335.com-多彩彩票合法吗| www.879722.com-快乐分分彩人工计划| www.957030.com-有没有彩票挂机软件| 易彩网www.12455f.com| www.273915.com-老是彩360走势图| www.416911.com-彩虹4无人机图片| www.744639.com-暗网彩票如何加入| www.822206.com-天空彩票四字解玄机| www.900087.cc-22彩票网-| www.967888.cc-彩票能中奖吗| 豪彩VIPwww.946854.com| www.11av.com-中国竞彩篮球胜负| www.7288.wang-传统彩网址-| www.418909.com-彩金项链多少钱一条| www.531555.com-福利彩票3d金码| www.626452.com-三d中奖彩票图| www.698225.com-时时彩遗漏统计软件| www.773235.com-彩票送50元彩金| www.843306.com-国家快开彩票新规| www.904583.com-江苏快三高手交流群| www.973084.com-彩虹六号愚人节活动| www.mz.com-中福快三计划计划网| www.397611.com-七星彩2280头尾| www.562837.com-青岛快三骗局揭秘| www.913533.com-精准彩票预测网站| www.982204.com-快三有多少组号码| www.df05.com-全民快三官方网站| www.45138.cc-日日彩票靠不靠谱| www.069573.com-神彩v1-| www.16dg.com-彩虹6号买了后悔| www.752250.com-助赢彩票专家| www.867876.cc-七星彩35期-| 600万彩票www.449810.com| www.95qm.com-什么是红彩网直播| www.07ao.com-儿童彩铅简笔画大全| www.7960.vip-正好彩票网黑龙江| www.598413.com-体彩第19027期| www.763900.com-一分快三豹子是哪个| www.130286.com-易彩网能提现吗| www.354442.com-福彩一个亿-| www.468729.com-御彩轩彩票计划| www.562436.com-豪彩vlp下载| www.60287.com-黑彩刘雪龙个人资料| www.5189.me-四川福利彩票12| www.5637.cc-彩票群里买彩票赚钱| www.01786.com-凤凰天机六各彩资料| www.nt1.com-福彩3d和值跨度表| www.833055.com-彩77官方登陆| www.939478.com-黑龙江福利彩票官方| www.940344.com-最准全天时时彩计划| www.827515.com-三分钟时时彩| www.19885.cc-彩客站最新邀请码| www.yq55.com-体彩七位数中奖几率| www.757797.com-众彩易购是假的吗| www.954326.com-浙江体彩中心地址| www.90pk.com-彩票销售问题| www.5684.cc-福彩pk拾分析| www.873495.com-c38彩com-| www.938498.com-快频彩百度百科| www.991661.com-彩吧vip官网| www.527005.com-时时彩五星一注一元| www.8974.me-重庆时彩网盘代理| www.669261.com-体彩p3图谜第一版| www.950611.com-乐彩客彩票网页版| www.it46.com-官方彩票投注技巧| www.75174.com-中国福彩有几种| www.104918.com-瑞祥祥云彩票合法么| www.ab78.com-七乐彩开奖号码表| www.988299.com-快三购彩小贴士| www.8yb.cc-体彩中几个数有奖| www.64eu.com-福彩开奖全部主持人| www.946668.cc-福彩东方6十1预测| www.by24.com-福利彩票历史查询| www.q25.cc-江苏快三查询走势图| www.012251.com-福彩3d谜语准确率| www.096893.com-体彩的利润-| www.156661.com-惠赢彩票-| www.554789.com-体彩遗漏号是干嘛的| www.677077.com-福彩体彩是不是骗局| www.793038.com-安阳彩票大奖骗局| www.856575.com-关于福利彩票| www.6273.com-福彩3d天机壁码| www.562302.com-陶彩吧-| www.627715.com-体彩18043期| www.682992.com-分分彩玩法技巧大全| www.749053.com-248彩票投注软件| www.800983.com-福彩3d彩涂今日| www.860640.com-南京竞猜快三| www.910200.com-今天银海彩报| www.960442.com-竞彩宝安卓-| 易盈彩票www.7793j.com| www.9339.cc-福利彩票新闻| www.3137.cc-北京体彩排三走势图| www.8746.vip-快购彩票软件下载| www.881064.com-网上私彩怎么开| www.974659.com-中华大彩票-| www.bu98.com-经彩网老版走势图| www.3py.com-是哪个人发明的彩票| www.541515.com-彩经网下载安装| www.675515.com-彩票连挂和中挂| www.988.gg-下载够力七星彩软件| www.71922.com-好乐多彩票是真是假| www.893059.com-500彩票下载安装| www.792113.com-7彩颜色-| www.991661.com-彩吧vip官网| www.97378.com-北京福彩快三排| www.75we.com-平台秒秒彩中奖规律| www.1333.live-永利皇宫网络博彩| www.08849.com-好彩频道直播| www.063358.com-投资彩票店前景如何| www.is48.com-全民彩票吧-| www.n48.net-手机新浪彩票网| www.440494.com-法院查封彩票站| www.53zr.com-5分彩计划计划网址| www.cpw| www.86367.com-搞彩票倾家荡产| www.306344.com-七星彩中奖彩票图片| www.657469.com-亿彩网官网下载安装| www.1935.net-亚洲彩票app下载| www.545769.com-福利彩票向谁申请| www.21911.cc-七乐彩免费推荐号码| www.16709.com-彩票3d玩法与奖金| www.550189.com-778彩票网-|