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.104480.com-竞彩足球兑奖规则| www.333333.cc-彩票系统开奖源码| www.915227.com-老时时彩下载| www.990837.com-福彩3走势图带连线| www.ck27.com-吉林体彩网-| www.zi24.com-彩票开奖信息公告| www.323728.com-七星彩网易开奖直播| www.479472.com-体彩大乐透哪里兑奖| www.569221.com-斯特凡曼德尔彩票| www.642196.com-福彩logo矢量图| www.716786.com-彩铅画星空鹿森林| www.796631.com-l竞彩-| www.871388.com-最高倍率彩票| www.941331.com-在哪里找彩票玩家| 彩之家www.21czj.com| www.6566.in-网络彩票的管理到位| www.318936.com-江西乐彩-| www.433349.com-假彩票制作图片| www.1jx.cc-彩天下平台下载| www.61nx.com-福彩中心判刑| www.1580.org-最贵的彩票收藏| www.996623.com-福利彩票走试| www.r40.org-6开彩开奖结果查询| www.354099.com-全球奖金最高的彩票| www.456274.com-彩票忏悔视频| www.566529.com-和彩日本料理| www.640094.com-奥克足球竞彩网| www.722947.com-阿里彩票入口| www.807393.com-足彩2串1计算公式| www.882282.com-快三彩票平台可信吗| www.956125.com-彩影相册-| 68彩票www.68682h.com| www.hw65.com-北京彩票官网| www.495780.com-香港利记博彩| www.689060.com-彩16彩票官网下载| www.819187.com-彩票平刷原理| www.007618.com-七乐彩振幅走势图| www.092362.com-20元体彩刮刮奖7| www.168106.com-河北快三跨度走势| www.272396.com-网易彩票靠谱么| www.356345.com-华阳彩票官网合买| www.442808.com-福彩推荐-| www.531789.cc-彩票亿元巨奖选号| www.606823.com-属羊的人买彩票| www.676108.com-3地彩吧走势图| www.758653.com-彩票赚流水钱违法吗| www.830881.com-元角分彩软件下载| www.897422.com-和9彩类似平台| www.964813.com-一分时时彩官网计划| www.cp598.com-中福彩票骗局| www.ly53.com-华宇彩票网站| www.k12.hk-七天彩历史邀请码| www.37cw.com-uk彩可靠吗-| www.688287.com-广东福彩投注平台| www.950075.com-聚彩jc下载-| www.jj20.com-彩票时间差漏洞| www.0919.net-体彩合买软件| www.099823.com-87彩店ios-| www.732366.com-彩04彩票app| www.931104.com-色彩构成-| www.82yh.com-彩云网盘官网| www.03103.cc-幸运中彩票苹果版| www.332359.com-微商中彩彩票网| www.599911.com-体彩店卖双色球吗| www.871461.com-福彩三d藏机图今日| www.vx5.com-今晚七星彩结果| www.83fh.com-好彩台-| www.9286.biz-乐彩沦乐彩论坛| www.77893.cc-阅读更多精彩内容哦| www.407625.com-预彩资讯-| www.529381.com-87足彩官方app| www.664055.com-今晚七星彩出什么码| www.757528.com-大鹏金服乐彩是什么| www.848688.com-竞彩比分推荐专家| www.929197.com-玩彩app软件| www.999085.com-分分时时彩是否有假| www.nk68.com-新浪足彩网页| www.22cb.com-3726澳发彩票网| www.1727.vip-美女玩彩票骗局| www.068912.com-湖北福彩快3下载| www.195921.com-北京快三官方开奖| www.318683.com-莱利ll彩票登陆| www.404037.com-五百万彩票走势图| www.506540.com-向洪甲预测彩票准吗| www.568549.com-微彩论坛排列三五| www.682697.com-微信购彩票合法吗| www.750119.com-网上彩票哪个软件好| www.809622.com-彩票我要购彩票| www.886742.com-c彩61大发快三| www.wp19.com-彩票走势分析技巧| www.07dc.com-彩票返奖率计算公式| www.79xs.com-福彩排列5几点开奖| www.1998.cx-网上彩票开奖查询| www.6756.cm-彩票相关新闻| www.12442.com-国外彩票代购网| www.60032.cc-微彩苹果下载| www.062809.com-彩票软件被骗能报警| www.131358.com-河南商丘彩礼血案| www.226143.com-彩票追号-| www.290595.com-福彩快三吉林省| www.358785.com-买什么彩票最可靠| www.434961.com-彩票代销费-| www.518594.com-福彩开奖最新| www.597449.com-分分快三会不会作弊| www.657959.com-彩票app不能购买| www.54516.com-618彩票官网下载| www.96768.com-中国彩票是否做假| www.055549.com-好彩网软件下载| www.132115.com-彩妆店品牌-| www.194988.com-福利彩票数字3玩法| www.256961.com-福彩三d技巧| www.317422.com-时彩彩怎么玩能赢钱| www.379572.com-湖南动物彩票开奖结| www.472254.com-一张彩票赚多少钱| www.544180.com-今天的彩吧图第四版| www.603532.com-三晋福彩3d-| www.663355.com-123福利彩票| www.722755.com-省份快三彩票| www.784667.com-福利彩票管理中心| www.848809.com-彩世界看开奖记录| www.900388.cc-中国彩票大奖排行榜| www.ir09.com-下载360彩票| www.5jm.com-福彩专家杀码定胆| www.46ib.com-下载彩票易网下载| www.3186.biz-体育彩票送8克金条| www.122278.com-1分彩怎么才能赚钱| www.175317.com-福建快三49-| www.291078.com-乐彩网排列三首页| www.383223.com-58同城春天彩票| www.480221.com-新浪竞彩北单| www.551337.com-lb快乐彩技巧稳赚| www.631610.com-海南七星彩卖奖软件| www.686428.com-500彩票计划助手| www.752219.com-网上彩票能相信不| www.807332.com-山东彩票开奖查询| www.868890.com-三分彩是骗人的吗| www.959597.com-彩66彩票平台注册| www.eh92.com-彩经网蓝球杀号| www.87sl.com-三度博彩论坛网址| www.gb73.com-快三高级追号| www.798597.com-时时彩极速走势图| www.au67.com-彩神ll8-| www.31ll.com-奇门预测彩票| www.6558.vip-盈丰彩票靠谱吗| www.68615.com-聊城竞彩店-| www.129646.com-七星彩坛论-| www.403000.com-福彩杀码大全定胆| www.614022.com-彩票榜是合法的吗| www.820698.com-中国福彩5-| www.404.in-万家彩票app下载| www.963364.com-国外彩票代购平台| www.707610.com-全能中彩彩票网| www.75557.com-甘肃快三走势图昨天| www.99pz.com-竟彩单场混串玩法| www.7803.vip-竞彩输钱压抑| www.34976.com-开快三犯法-| www.91358.com-手机炫彩灯-| www.030110.com-百度乐彩彩票| www.111173.com-快三投资技巧| www.197379.com-内蒙古福彩怎么兑奖| www.765181.com-哪些黑彩平台有漏洞| www.92306.com-七乐彩在线缩水软件| www.102030.cc-彩票赢钱技巧| www.998765.cc-中国体育彩票开店|