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.100053.cc-九州彩票平台| www.923205.com-彩票靠谱不-| www.cai5504.com福彩甘肃快3走势图| www.l65.cc-彩神争8有人赚钱吗| www.346873.com-任九场胜负彩预测| www.59796.com-网上买彩票能赢吗| www.831080.com-彩票app248-| www.960573.com-香港所有赌场送彩金| www.ct84.com-彩票平台哪个稳定| www.40xz.com-七星彩老鼠精图版| www.988.org-彩票2元客户端| www.010895.com-易迅彩票app| www.014568.com-七星彩前4个规律| www.095111.com-福彩双采图双彩论坛| www.873903.com-下载上海福彩网官网| www.384909.com-腾讯彩票网站| www.547767.com-高频彩票接口| www.626160.com-彩搜合作站点| www.690967.com-鑫彩网下载-| www.787829.com-河口彩客化学项目| www.258329.com-微信彩票下载手机版| www.381846.com-买彩票中奖的小说| www.pp31.com-我想买彩票发财| www.765269.com-博彩app平台开发| www.203912.com-七乐彩直播-| www.333925.com-体育彩票全麦| www.677257.cc-彩色印刷包装厂家| www.1773.bid-中国体彩大乐透号码| www.29363.cc-苹果系统买彩票软件| www.c58.cc-黑龙江福彩中心地址| www.12291.com-亿彩网登录-| www.364123.com-3分时时彩下载| www.962231.com-福利彩票3d跨度表| www.pc9.com-派彩每日推荐| www.yk75.com-彩票3b试机号| www.30oe.com-山东省体育彩票| www.224645.com-五分快三倍投| www.764833.com-足球彩票网上去哪买| www.16988.com-彩票破了还能兑奖| www.063058.com-彩票店加盟条件| www.809514.com-好彩客彩票下载| www.79dj.com-重生之中彩人生小说| www.505846.com-手机赚钱彩票平台| www.18ox.com-彩尊登录网址| www.455903.com-彩之堂-| www.379173.com-极彩彩票-| www.505346.com-3d图库彩吧第二版| www.581724.com-爱中彩票应用| www.910117.com-佰易彩票-| www.93814.com-福彩快三改时间| www.131707.com-临沂彩礼-| www.661217.com-神奇的二组彩票数字| www.90vh.com-体彩超级19018| www.175126.com-正彩彩票-| www.295635.com-江苏福彩快三口诀| www.417036.com-彩虹无人机出口状况| www.8062.cn-水彩基础图片| www.407518.com-关于彩票造假新闻| www.082.date-幸运彩票线路导航| www.745813.com-棒棒彩票注册靠谱吗| www.876817.com-下载快三-| www.gc03.com-创彩网-| www.dh10.com-达人彩票能相信吗| www.6868.cn-大玩家彩票什么用| www.08ox.com-彩神计划软安卓版| www.3737.mobi-彩77彩票网-| www.885873.com-3d红五彩吧图库吧| www.265704.com-网络彩票赌博诈骗案| www.8263.cc-360彩票遗漏遗漏| www.362715.com-买彩票的人少了| www.490444.com-河北七星彩玩儿法| www.567100.com-彩虹台手机直播在线| www.361502.com-易发彩网站-| www.463660.com-万豪彩票输了几万| www.495557.cc-大冶市福利彩票中心| www.yl0.com-10选5是什么彩票| www.561903.com-中彩彩票注册教程| www.33si.com-19003七星彩| www.705339.com-中福利彩票领奖程序| www.1155.net-大富彩票网金福彩票| www.23054.com-马上彩票-| www.86821.cc-竞彩猫怎么发推荐| www.179608.com-保定快三开奖走势图| www.665626.com-新加坡大彩开奖号码| www.845380.com-体育彩票哪年发行的| www.u13.biz-思乐彩票督导员| www.2hp.com-真有人买彩票中奖吗| www.972129.com-博彩水位怎么看| www.5740.win-体彩七位数四等奖| www.72566.com-莲乡意蕴彩票技巧| www.4631.biz-买动物的彩票是规律| www.77899.cc-3d彩报精华布衣2| www.989059.com-v9彩票合法吗| www.75811.cc-福利彩票e彩在线| www.7946.vip-彩墨笔-| www.947747.com-吉林体彩网11| www.ou97.com-时时彩倍投器| www.329119.com-打开青海福彩网| www.467846.com-摆渡龙江体彩网| www.557740.com-彩虹伞亲子游戏视频| www.652332.com-上海分分彩-| www.784355.com-什么是网络售彩| www.556743.com-苹果彩票网站| www.362835.com-海南七星彩梦图册| www.641012.com-澳门五分彩走势图| www.594067.com-优乐炫彩彩票平台| www.894524.com-福利彩彩票开奖结果| 大赢家彩票www.529081.com| www.936328.com-凤凰时时彩平台官网| 福彩网www.5522n.cc| 500彩票网www.680221.com| www.8214.com-江西福彩快三预测| www.49557.com-中国福彩36选7| www.806988.com-谁有7号彩票邀请码| www.wf86.com-北京5分彩开奖纪录| www.889644.com-重庆三分彩走势图| www.979346.com-亚彩会登录| www.fc37.com-三分彩票解码器| www.i54.org-微彩会彩票下载| www.co4.com-上海福彩快三开奖| www.wf69.com-彩票开奖今天直播| www.895.cm-下载福彩3d字谜| www.237745.com-竞彩足球比分玩法| www.361775.com-网上彩票无法提现| www.317672.com-977彩票平台下载| www.068596.com-彩票计划86在线网| www.147569.com-d8彩票官网-| www.229382.com-加群教你买彩票骗局| www.302435.com-福彩快3几点到几点| www.365377.cc-七彩专栏-| www.98319.com-掌上中彩软件下载| www.at40.com-一分钟一次彩票| www.h18.xyz-维希亚七星彩预测| www.39lk.com-人工彩虹的物理原理| www.265.cc-彩钢板单板-| www.2999.date-牛彩网开奖结果| www.8572.net-亿彩网安卓版下载| www.76154.com-玩彩是不是骗局| www.290869.com-吉林快三遗漏号查询| www.319936.com-陕西派彩代理电话| www.32dn.com-幼儿画彩虹-| www.973213.com-女的唱的歌词里彩虹| www.121343.com-高频彩多人买时间| www.134433.com-福福彩3d走势图| www.501408.com-易彩乐游戏快三| www.803717.com-百宝彩票可靠吗| www.220567.com-彩神8靠谱吗| www.197105.com-发达彩票的真实性| www.794851.com-体育彩票如何中奖| www.211155.com-快三彩票是什么| www.233973.com-国家福彩快三是什么| www.023957.com-境外网络彩票| www.86dk.com-中彩国际是合法的吗| www.104544.com-贵烟好彩牌香烟| www.206174.com-易彩是不是属于诈骗| www.305996.com-335彩票网-| www.420592.com-七乐彩定位走势| www.wr61.com-哪些彩票属于官方的| www.61822.cc-金福彩票-| www.287831.com-福i彩开奖结果查询| www.gh97.com-三分快三是不是假的| www.22ib.com-体育彩票1360亿| www.988014.com-彩票51中彩怎么样| www.ij49.com-福彩下载-|