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天

知道了
彩01彩票 www.30br.com-高返点彩票-| www.957015.com-京彩京彩挂机软件| www.av81.com-体彩排列三开奖号| www.26ey.com-网易3d彩票推荐网| www.841499.com-贴吧福彩内部号| www.sp38.com-黑客时时彩改码视频| www.07636.com-中彩那天课文讲解| www.460470.com-诺手炫彩皮肤| www.753923.com-七星彩彩版-| www.878716.com-福彩3d百度乐彩网| www.977237.com-中国福彩天津快三| www.4704.cc-欢迎来到苏宁彩票| www.756962.com-全民彩票_用户注册| www.019518.com-遵义福彩管理中心| www.612095.com-上海快三倍投| www.751031.com-江苏快三专家预测网| www.12mt.com-贵宾网彩票与你同行| www.659514.com-2001年足彩-| www.6383.xyz-刮刮福利彩票规则| www.080968.com-潍坊市体彩总部| www.67018.com-安阳福彩中心| www.442866.com-3d彩票计划-| www.gh97.com-三分快三是不是假的| www.863.site-时时彩买法稳| www.132594.com-米彩-| www.206874.com-11选5购彩票网站| 大赢家彩票平台www.763117.com| www.vp72.com-湖北快三杀号专家| www.57bc.com-加盟中国福彩| www.444713.com-彩票为什么不实名| www.682130.com-足彩19047-| www.622773.com-甘肃福彩双色球| www.y65.cn-彩票如何中奖几率高| www.730306.com-福彩3d太湖字迷网| www.668357.com-买什么彩票能中大奖| www.822731.com-人人中彩票网电脑版| www.047263.com-22彩票平台网址| www.254817.com-湖北省快三开奖今天| www.295365.cc-微彩票登录官网| www.007509.com-温州快三彩票| www.878282.com-福彩扫一扫下载安装| www.0288.in-彩票销售业主总结| www.402342.com-dd彩票平台真假| www.nj80.com-篮球竞彩app| www.800838.com-银海彩票工作室3d| www.874683.com-信彩票是正规的吗| www.943363.com-微微彩票下载安装| www.994723.com-时时彩在线做号工具| www.cu21.com-手机彩票软件哪个好| www.je90.com-宝马彩票送38| www.25gq.com-下彩老版本-| www.0854.in-福彩群英会开奖号码| www.062642.com-鸿运彩票下载安装| www.048577.com-牛彩论谈首页官网| www.xh12.cc-网上彩票群真的假的| www.7120.vip-博创彩票是不是骗局| www.23833.cc-481彩票走势图| www.293191.com-体彩481官网| www.463325.com-机选福彩排列7| www.807025.com-足彩如何稳定盈利| www.45tm.com-盛大彩票怎么才能赢| www.548441.com-安徽快三开奖查| www.653265.com-幻彩彩票下载手机版| www.820941.com-长宁县福利彩票站| www.84so.com-青蛭彩票开奖现场| www.268.cn-玩王牌彩票的技巧| www.369431.com-福建体育彩直播聊天| www.790290.com-双色球彩票分析大师| www.867005.com-周五晚上开奖的彩票| www.947549.com-彩票微助手安全吗| www.988890.cc-彩51投注平台| www.c3.cm-安徽快三历史遗漏| www.mn61.com-时时彩破解计算公式| www.058653.com-彩报3d怪字图今天| www.870971.com-陕西快三有吗| www.645072.com-酷彩客户端下载| www.236580.com-全民彩票吧-| www.392812.com-彩铅画海贼王| www.525216.com-杨大侠彩乐乐| www.66ej.com-神龙彩票app| www.706704.com-吉林快三预测走势| www.775369.com-体彩发行时间| www.855350.com-双彩论坛试机号| www.911561.com-家彩论坛手机版| www.971302.com-福彩刮刮卡中奖概率| 大赢家彩票www.599643.com| www.js20.cc-王者彩票骗局揭露| www.644116.com-彩票兑奖注意事项| www.723703.com-彩乃奈奈个人简介| www.635169.com-彩天下平台-| www.707690.com-彩票历史号码软件| www.793601.com-公务员中彩票违规吗| www.868288.com-五分彩万位公式| www.948779.com-福彩3的d走势图| www.cp9558.com-下载旺彩安装| www.ug85.com-大发快三无法提现| www.299245.com-中彩在线手机版| www.372541.com-幸运彩票28-| www.451282.com-幸运分分彩是假的吗| www.888727.com-彩站宝怎么买彩票| www.990687.com-手机彩票选号软件| www.tv2.com-彩票123下载| www.16fr.com-体彩排列五第97集| www.63ur.com-爱迷彩下载-| www.0086.club-中国彩票有几种类型| www.6278.xyz-五福彩app有哪些| www.336541.com-万豪彩票手机版| www.411552.com-黄鹤楼彩色包装纸箱| www.520019.com-彩票中五百万怎么办| www.579322.com-燕照风采福利彩票| www.87838.com-三弟福利彩票贴吧| www.234108.com-大发快三输了很多钱| www.299474.com-内蒙古快三玩法技巧| www.357920.com-黄金定律彩票应用| www.17111.cc-足彩走水什么意思| www.b33.top-49cc彩票香港| www.930.tv-七星彩四个号多少钱| www.298857.com-七星彩开奖| www.092699.com-商丘彩礼-| www.174424.com-河北快三走势图表带| www.237215.com-江苏体彩e-| www.297654.com-手机玩快三-| www.5288.love-派彩网是正规网站吗| www.9477.org-彩票在线统计器| www.160396.com-福彩3d标准和差| www.74up.com-清新氧气七星彩| www.93ik.com-玉林体育彩票| www.170345.cc-快三顺口溜-| www.649886.com-博彩是否犯法| www.771913.com-非凡彩票充值| www.46053.cc-云彩在线彩票| www.37729.cc-彩虫app-| www.527811.com-时时彩和值玩法| www.353915.com-贵州11选5彩经网| www.012317.com-v8时时彩试玩| www.4141.cc-彩虹电视下载| www.627812.com-玩彩票平台哪个好| www.899447.com-彩神通苹果版| www.986415.com-今天福彩3d藏头诗| www.id46.com-80彩票是骗局| www.031605.com-洋彩-| www.639700.com-竞彩政策-| www.778711.com-11选5多乐彩开奖| www.647963.com-斯蒂芬数学家彩票| www.827066.com-京东1.5分彩官网| www.967717.com-买彩票能中吗| www.vt42.com-惠民彩票平台合法吗| www.28zv.com-足彩8场-34关| www.371.online-时时彩官方通知| www.750507.com-九歌彩票手机苹果版| www.813189.com-香港的彩金可以买吗| www.893679.com-49彩票官网平台| www.962593.com-97的彩票app| 创世纪彩票www.36787d.com| www.20201.cc-今曰竞彩推荐| www.113795.com-超级快三精准计划| www.f72.club-彩票3d图谜汇总| www.388649.com-七星彩体育彩票开奖| www.507123.com-通宝博彩地址| www.42695.com-彩宝贝网下载| www.988519.com-中彩手彩和中彩网| www.cd00.com-新疆福彩时时开奖| www.535553.com-彩票18倍中奖彩票| www.675878.com-订婚的钱算彩礼钱吗|