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天

知道了
9彩注册 www.2401.vip-3d专业玩彩胡先生| www.062749.com-九龙彩票9o在线| www.66929.cc-福利彩票点-| www.821587.com-群英会开奖彩乐乐| www.969574.com-彩票店可以追号吗| www.8962.vip-肥城体彩600万| www.267632.com-易中彩票-| www.470087.com-英国买足球彩票| www.7979.org-网上博彩骗局有哪些| www.1664.biz-七乐彩怎么选号| www.277030.com-青海快三玩法技巧| www.xx11.cc-818彩票app-| www.958832.com-彩票节后什么时开售| www.5795.org-体彩排列五发行时间| www.177887.com-五分快三开奖结果| www.269038.com-网上恢复可以买彩票| www.570721.com-彩票134-| www.709389.com-创名彩票下载安装| www.oc32.com-网上推销彩票怎么聊| www.231610.com-重庆时时彩幕后控制| www.566790.com-怎么建彩票网站| www.657824.com-彩798彩票骗局| www.742666.com-新星彩-| www.130205.com-时时彩选好的方法| www.618850.com-新浪电脑版首页彩票| www.765462.com-七星彩高手交流坛伦| www.699878.com-香港正版彩神三码书| www.804266.com-福利彩票网上买| www.xk6.com-深圳福彩网-| www.d00.com-百宝彩百变王牌| www.29ex.com-体彩中奖号码是啥| www.162736.com-170彩票网网址| www.250058.com-冀彩宝官网靠谱吗| www.329795.com-hcw好彩网-| www.426761.com-彩票站挣钱么| www.07708.com-福彩3d一千个号码| www.698860.com-全民彩票骗局| www.5467.vip-彩票开奖试机导3d| www.28639.cc-买竟彩-| www.76773.com-万优彩票安全吗| www.041116.com-q彩官网-| www.140213.com-幸运时时彩有官网吗| www.13658.cc-福彩走是图-| www.73827.com-网上购买体彩| www.028334.com-最新平台送彩金| www.42ko.com-七彩西游记火焰山| www.072509.com-湖北快三二同号遗漏| www.151812.com-彩票软件大红鹰下载| www.234393.com-江苏快三官方下载| www.308585.com-11选5官方彩票| www.059317.com-微信彩票购买| www.137583.com-全民彩票时时彩计划| www.208115.com-爱投彩票-| www.272317.com-快三怎么玩法才赚钱| www.338357.com-蚂蚁彩票下载| www.971569.com-2分彩可靠吗| www.cai6789.cc-快三彩票群真的假的| www.152295.com-立彩助手苹果下不了| www.223688.com-中国体彩大乐透玩法| www.311057.com-世界最高彩票| www.375532.com-体彩任三中奖规则| www.462010.com-体彩排列3怎么兑奖| www.542574.com-全国福彩快3| www.605048.com-刮刮乐中奖彩票图片| www.669373.com-pk彩票平台安全吗| www.749909.com-公牛团队彩票| www.93213.com-京彩生活app下载| www.801026.com-体彩3d二元网| www.243099.com-快三福彩下载安装| www.2730.net-赢钱彩下载苹果版| www.307719.com-七星彩开奖历史| www.441365.com-体彩限售-| www.139484.com-牡丹海棠与彩玉海棠| www.227931.com-大发快三和值计划| www.293357.com-一分快三追豹子技巧| www.370718.com-四季彩平台能拿钱吗| www.467546.com-一彩票开奖号码| www.565052.com-玩彩黑平台-| www.661516.com-黑彩是按流水判刑吗| www.733342.com-彩票多久开一期| www.805748.com-统计彩票数据| www.886886.cc-各彩种长龙提醒| www.984868.com-玩长城彩票挣钱吗| www.jl80.com-58福彩下载安装| www.52963.cc-青海体彩兑奖在哪里| www.99453.com-体育彩票7位数玩法| www.94wl.com-迪嘉彩票-| www.338394.com-做梦梦到彩票中奖了| www.455864.com-关于彩票的故事题目| www.542229.com-体育彩票网点号查询| www.605010.com-盈盈彩官网彩票| www.4522.biz-七星彩35期推荐号| www.36iy.com-试机号七星彩| www.78120.com-九州彩票网靠谱吗| www.677597.com-足彩加时赛算不算| www.976347.com-焦作彩票-| www.037797.com-乐彩快三助手| www.790030.com-青海省福彩中心电话| www.883077.com-甘肃快三二码遗漏表| www.967183.com-竞彩兑奖多久超期| www.cai75.com-今天快三开奖结果| www.876692.com-五分彩怎么玩法介绍| www.965089.com-彩票开奖时间结果| www.cp048.com-江苏快三走势图下载| www.951047.com-正彩官网-| 大玩家彩票www.dwj0066.com| www.kq75.com-重庆快三-| www.s28.xyz-双阳黑彩小哈| www.795.mobi-小六壬测彩票的号码| www.279836.com-时时彩豹子最佳规律| www.915604.com-时时彩下载-| www.cai5822.com长春快三中奖查询| www.69753.com-拉萨天海夜市体彩| www.119965.com-福彩投资论坛| www.194659.com-福彩快三心态| www.358552.com-彩票站用的键盘| www.16896.cc-彩神v骗局揭秘| www.371888.cc-牛彩彩票网能赚钱吗| www.613451.com-高频彩票调整实体店| www.745164.com-c02彩票登录平台| www.786097.com-彩票大赢家网站首页| www.902102.com-黑彩平台如何搭建| www.987418.com-国家合法的彩票平台| www.jz22.cc-新2彩票x22cc| www.40366.com-掌优彩票主页| www.5999.live-淄博体彩中心地址| www.163722.com-玩彩票的软件| www.496802.com-体彩317开奖| www.355348.com-智博微彩城公众号| www.423342.com-蚂蚁积分换彩票| www.505677.com-彩票套利会被风控吗| www.i70.mobi-存38送58彩金| www.5054.win-旺彩双色球推荐号码| www.00737.com-福彩三d形态| www.48268.com-彩友会计划软件下载| www.85085.com-彩票二维码泄露兑奖| www.027954.com-京东快彩是真的吗| www.59168.cc-福彩三帝胆码| www.883572.com-友成彩票-| www.39767.cc-中福游戏中福彩票| www.763792.com-华宇装潢彩票能玩吗| www.017190.com-52彩票网-| www.116889.com-今日足彩比赛结果| www.195434.com-1分彩-| www.275465.com-香港彩票走势图| www.365909.cc-3d彩组六必中| www.798059.com-福建彩票11选5| www.935056.com-彩六苹果怎么下载| www.vh31.com-福彩最心断组| www.153607.com-时时彩四星万能胆| www.272948.com-彩票内部数据| www.863781.com-福彩3d试机号运用| www.239835.com-台北快三一分钟一期| www.885798.com-彩神通试机号| www.024134.com-分分彩挂机稳赚方案| www.151473.com-下载时时彩-| www.779373.com-菠萝彩论坛手机版| www.867970.com-七星彩走势图| www.172222.cc-江西福彩快3推荐| www.65473.com-炫彩联盟骗局| www.89997.com-今日福彩三地预测| www.1219.pw-体彩做假事件| www.8231.biz-大旺彩票app| www.56137.cc-生肖码属于什么彩票|