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.3844.cn-7星彩开奖走势图| www.318169.com-网上赌十字彩| www.450376.com-7k彩票站-| www.802026.com-精彩大片视频播放| www.921386.com-买彩票中奖概率| 500彩票www.338062.com| www.768925.com-足彩竞猜app下载| www.278983.com-福彩数字3单式玩法| www.997481.com-幸运快三注册邀请码| www.690392.com-新浪足彩即时欧赔| www.771214.com-五分彩是哪里的| www.842965.com-体育彩票哪年上市| www.922836.com-2019竞彩店-| www.979113.com-贵烟新好彩多钱一盒| www.az30.com-体彩排列三中奖号码| www.uh74.com-网上购彩合法网站| www.12su.com-快三助手手机助手| www.87gb.com-2345彩票网登录| www.522129.com-中国体彩三十一选七| www.586605.com-湖北快三豹子分布图| www.713456.cc-《中彩那天》原文| www.878676.com-加盟福利彩票挣钱吗| www.959352.com-20选5彩票注册| www.cai1144.com快三是不是骗局揭秘| www.178307.com-买快三输的最惨的人| www.305659.com-负债百万能买彩票嘛| www.8704.cm-分分彩后二杀码技巧| www.474120.com-分分彩挂机会赔钱吗| www.206762.com-聚宝彩票是真的吗| www.295075.com-彩运福彩快3| www.166258.com-大发快三怎么玩| www.502725.com-私彩开奖-| www.514228.com-会彩是骗局揭秘| www.644444.com-9h号彩票-| www.895554.com-一定牛甘肃快三| 网易彩票www.07163x.com| www.25vj.com-体彩大管家-| www.5062.vip-网上在彩票停售之后| www.730682.com-新浪彩票网预测| www.01220.com-重庆时彩刷量方法| www.86167.com-十一选五快彩助手| www.106689.com-计划快三软件| www.340406.com-体育大乐透彩票开慢| www.019301.com-遵义福彩中心| www.768078.com-福彩胆码预测| www.52081.com-彩名堂app苹果版| www.136275.com-福彩七乐彩开奖公告| www.689219.com-福彩3地黑圣手字谜| www.796336.com-怎样制作竞彩表格| www.883597.com-奔驰彩票安卓版| www.954819.com-七彩彩票安卓版下载| 大玩家彩票www.84499t.com| www.777225.com-七星彩奖虫软件下载| www.871394.com-中国福彩总汇图九| www.956901.com-百彩免费料-| 环球彩票www.644996.com| www.mx21.com-福彩快三新玩法规则| www.1gl.com-内蒙快三选号软件| www.76zd.com-福利彩票刮刮乐秘诀| www.972953.com-彩虹app授权| www.42868.com-信誉好的时时彩软件| www.022357.com-恒彩88手机客户端| www.136651.com-海南彩票解梦查码| www.81ft.com-综艺福彩合法吗| www.3385.me-彩票系统官方网| www.697115.com-七星彩有胆拖玩法吗| www.280484.com-助赢时时彩计划免费| www.377033.com-奔腾彩票app官网| www.466516.com-秒秒彩是-| www.538584.com-赢彩票开奖-| www.613900.com-平安彩票极速赛车| www.672259.com-彩宝网可靠吗| www.745928.com-八亿彩安卓下载| www.802351.com-彩票站出兑信息| www.865640.com-福彩3d报纸和图案| www.922147.com-彩礼是什么-| www.8248.xyz-5分钟快三计算公试| www.91277.cc-四色好彩爆珠| www.220057.com-快三体育娱乐平台| www.6981.org-七彩云盒子破解| www.311695.com-红牛彩票靠谱吗| www.373615.com-快三三同号单选| www.470555.com-国家授权正规足彩| www.745822.com-e彩票合法吗| www.806122.com-类似浩博的一样博彩| www.898115.com-彩票店足彩怎么买| www.972448.com-福彩3d组六魔图| www.cp653.com-cp快三-| www.1990.me-彩票预测app官网| www.738937.com-福利彩票讨论群| www.316433.com-体育彩票图标图片| www.254443.com-中原彩票下载| www.304176.com-彩之家app官网| www.051870.com-手机福彩下载安装| www.150976.com-正规的彩票销售系统| www.45027.com-彩38网站官方网站| www.038872.com-澳门快三公式| www.507219.com-在百度怎么买彩票| www.594488.com-彩虹连接-| www.360003.com-1516彩票下载| www.331.pw-二分快三规律| www.538345.com-a8彩票-| www.671402.com-彩独2破解-| www.819826.com-买彩票英语作文| www.95om.com-类似多彩投的app| www.447771.com-双色球精彩十分| www.529175.com-新浪彩票双色球竟技| www.809589.com-打彩票的软件排行| www.uw18.com-天天彩票论坛网| www.004142.com-买体彩输钱-| www.290955.com-福彩500期-| www.4413.cn-福利彩票倍数怎么打| www.545564.com-香港快乐5分彩计划| www.524798.com-公主音乐体彩聊天室| www.179860.com-内蒙古快三结果| www.261443.com-易彩2.0软件下载| www.875007.com-快乐彩票三抢红包| www.949853.com-下载大彩网-| 易彩网www.99638g.com| www.ev87.com-乐彩网论坛-| www.sb78.com-时时彩盈利怎么判刑| www.cp8993.com-正规的彩票app| www.os87.com-彩客网app旧版| www.227102.com-江苏彩票巨奖骗局| 大奖彩票www.99djcp.com| www.jg47.com-爱彩乐助手-| www.o04.net-打彩的技巧-| www.09394.com-广东手机福彩| www.123151.com-彩票跳开停追| www.332333.com-京彩娱乐app| www.32ww.cc-彩票牛彩网迷图3d| www.611109.com-彩38平台安全吗| www.076870.com-时时中彩票官网手机| www.521915.com-时时彩50本挂机| www.608321.com-韩国快三官方网站| www.670649.com-彩票店怎么兑奖| www.740342.com-安微快三计划| www.976204.com-彩礼五万寓意| www.817633.com-幸运时时彩定位走势| www.383117.com-福彩一定牛-| www.628820.com-百度如意彩正规吗| www.696153.com-四亿彩票登录网址| www.766772.com-彩票充值代理加盟| www.827468.com-排三彩宝贝杀号定胆| www.881575.com-澳门博彩五星| www.934266.com-预测彩票准的软件| www.974682.com-七星彩36期开奖| 幸运众彩www.108065.com| www.fh47.com-彩票计划网页大全| www.886403.com-大发彩注册-| www.899651.com-幸运彩基本走势图| www.983718.com-幸运快3是什么彩票| www.cv31.com-河北快三走势图在线| 68彩票www.68689x.com| www.4270.biz-福建快三全天计划| www.062640.com-鸿运彩票下载| www.287197.com-yy彩票1960-| www.353322.com-凤凰娱乐彩-| www.ll05.com-台湾彩券app| www.zj14.com-山东电脑福利彩票| www.693540.com-头奖彩票系统恢复| www.771707.com-美团彩票机合法么| www.7401.vip-色彩搭配图-| www.487607.com-中华彩票色子|