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.206563.com-体彩屋购彩大厅| www.071165.com-火山彩票-| www.ed92.com-福建体彩大乐透结果| www.311512.com-极速快三真的是坑啊| www.365381.cc-彩客彩票吧-| www.575656.com-安全的彩票app| www.726553.com-简单好看彩铅画图片| www.41945.com-福彩跑马的叫什么| www.039869.com-世界杯足彩几种玩法| www.210350.com-吉林省快三开奖遗漏| www.361330.com-永安彩票-| www.519510.com-竞彩职业打票人| www.635743.com-七星彩开奖结果网易| www.814893.com-燕赵风采福福利彩票| www.978517.com-白羊3d预测新彩网| www.b74.cc-三分时时彩平台| www.994645.com-手机时时彩做号软件| www.603795.com-竞彩官网app| www.681202.com-穷人买彩票能翻身吗| www.737631.com-福彩电脑版3d诗谜| www.974837.com-南国彩票论-| www.mx72.com-港视网中彩网| www.251.pw-网上哪里买彩票靠谱| www.184507.com-彩票大小单双技巧| www.442055.com-彩票店招聘营业员| www.333.red-入侵黑彩服务器| www.8wi.com-江苏快彩下载| www.45322.com-香港第一彩-| www.885400.com-购买大乐透彩票机选| www.514198.com-彩票遗漏统计与概率| www.9308.vip-乐彩实战擂台论坛| www.516004.com-足彩卖料骗局| www.098310.com-国彩彩票下载| www.638470.com-福彩什么时候开售| www.138911.com-同城彩票-| www.165569.com-中国福利彩票快三| www.75828.cc-七星彩大彩网走势| www.885528.com-利彩可以相信不| www.23089.com-3d彩票图纸-| www.887083.com-跟团队买彩票骗局| www.954719.com-排三走势图彩宝网| 众发彩票www.895465.com| www.39ca.com-秘鲁彩虹山的形成| www.1010.link-爱彩乐时时彩开奖| www.431023.com-射利彩签-| www.534448.com-五行绝算彩票电子版| www.907068.com-那种彩票六位数| www.cp6265.com-彩乐乐网遗漏| www.51ge.com-足彩大赢家手机软件| www.6452.org-速八彩票是什么| www.lt79.com-微彩合法的吗| www.166.tv-彩库宝典现场开张| www.992385.com-旺彩3d预测大师| www.tz61.com-彩票用语-| www.767912.com-彩彩网是真的吗快三| www.53iq.com-多多中购彩网| www.jm03.com-28彩票全程骗局| www.268060.com-看彩-| www.qh04.com-丰彩彩票真的假的| www.0438.net-懂球帝买足彩| www.260978.com-大乐透彩票选号神器| www.663472.com-乐彩彩票平台可信吗| www.781546.com-多宝彩票平台登录| www.940935.com-七乐彩三区-| www.855222.com-国家体彩主任| www.00121.com-黑客进入彩票| www.i60.bid-南方双彩网软件| www.4154.cn-彩虹的重力预告| www.5580.biz-彩票注册送88| www.365150.cc-600彩票下载| www.551390.com-彩票兼职跟单任务| www.879249.com-网购彩票体彩| www.786135.com-至尊娱乐购彩平台| www.982119.com-福彩六加一中奖规则| www.3024.com-东莞彩之源手提袋| www.748456.com-红彩会彩票怎么样| www.824989.com-好彩频道重播| www.903983.com-安徽快三有多少组| www.972450.com-菠萝彩魔图-| www.ez0.com-快三胆拖复式表| www.50263.com-玩彩票wcp123| www.0699.net-易彩堂彩票网址| www.9144.cn-彩虹代刷监控密钥| www.7485.com-开个彩票站好申请吗| www.6401.pw-48彩网站-| www.60333.com-什么叫黑彩票网站| www.31lr.com-昨天3d彩票开奖号| www.811.org-上海彩票店电话| www.875025.com-三地彩吧第一图库| www.9018.cn-彩票真的会中大奖吗| www.14ur.com-信阳彩礼大概多少钱| www.6655.loan-上海快三跨度怎么看| www.55go.cc-福建体彩网点申请| www.399965.com-周三开啥彩票| www.310533.com-体彩排三山东论坛| www.17552.cc-官方彩票平台app| www.192259.com-甘肃快三今日走势图| www.cp9658.com-福彩快3彩票站提成| www.591668.com-澳门博彩展览| www.36908.com-hcp58好彩票| www.7098.com-博创彩票-| www.m42.biz-手机报码福彩门户| www.640580.com-1216彩票app| www.076727.com-福彩3g字谜-| www.84it.com-300cp彩票-| www.3818.biz-河南快三开奖规则| www.691675.com-新浪胜负彩开奖| www.787811.com-亚博体育竞彩| www.01085.com-yy彩票官方网站| www.4974.biz-新浪爱彩论坛| www.85811.com-所有凤凰彩票平台| www.065229.com-乐迎彩票正规吗| www.40795.com-彩票九官方-| www.016006.com-彩票复制是怎么算的| www.075537.com-瑞彩祥云结不了卡| www.503812.com-彩客网买彩票合法吗| www.583340.com-汇彩网app官方网| www.683028.com-红彩彩票app下载| www.782677.com-宏发娱乐彩网| www.875793.com-买彩票的诗句| www.1403.xyz-彩虹伞亲子游戏大全| www.22638.cc-极彩娱乐登录平台| www.8389.xyz-足球彩票储备分析师| www.83bv.com-彩印包月-| www.254396.com-三分彩官网开奖结果| www.62.biz-80彩票可以提现吗| www.0110.site-天天彩票应用软件| www.82872.cc-体彩竞彩知识| www.027517.com-彩色相片什么时候有| www.111808.com-广发彩票-| www.469148.com-168彩票开奖网址| www.568740.com-彩票赛车技巧| www.660632.com-足彩信息爆料| www.720636.com-七星彩中奖了怎么办| www.791640.com-亿乐彩提现不成功| www.877861.com-彩票类完结小说| www.928012.com-福利彩开奖直播| www.973912.com-福彩种类及玩法| 13e彩票www.128760.com| www.kr05.com-新快三单机游手机版| www.479108.com-足彩的大品牌| www.561083.com-盈利彩票下载| www.630928.com-海南体彩开奖历史| www.697664.com-彩导航彩票-| www.772922.com-白菜彩金论坛| www.842606.com-桃子足彩新浪博客| www.911592.com-乐彩神邀请码| www.974477.com-福彩d开奖号| www.cp260.cc-河北新快三开奖结果| www.33068.com-福建体彩中心电话| www.90556.com-彩票下方二维码| www.13221.com-彩票缴款通-| www.715458.com-福建快三时时彩网站| www.885916.com-众达彩票app下载| www.978571.com-粤淘彩票怎么注册| www.cu87.com-哪个私彩网送彩金| www.zu21.cc-幸运彩彩票平台| www.54eb.com-彩票大奖故事| www.526120.com-世界杯胜负彩怎么玩| www.367777.com-花间美人古风彩铅画| www.kq21.com-福彩3d中奖概率| www.62uk.com-福利彩票乱买| www.19ol.com-肥城彩票体彩目录表| www.200285.com-更多彩票开奖号查询|