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.256114.com-江苏快三的开奖走势| www.wz96.cc-湖北快三每日推荐| www.45zd.com-福利彩票二十选八| www.392294.com-搜狐彩票平台| www.18693.cc-手机福彩快三的讲解| www.716955.com-彩铅颜色搭配表| www.06755.com-福彩金胆王一语定| www.414900.com-天天福彩开奖结果| www.538043.com-彩票国彩快3| www.656720.com-色彩3d漫画-| www.747462.com-彩易科思彩票app| www.95936.com-公益福彩快三| www.631506.com-海南七星彩人工计划| www.703998.com-广西体彩网电话| www.789958.com-福彩谜图总汇牛材网| www.894784.com-彩票自动选号软件| www.964361.com-广东体彩官网首页| 天天彩票www.205880.com| www.551442.com-福彩扫一扫看中奖| www.635362.com-七彩假期-| www.706802.cc-天天时时彩论坛| www.782872.com-易购彩赚钱是真的吗| www.861637.com-福彩快3怎么玩| www.949156.com-和值15红号快三| 8号彩票www.81520x.com| www.196726.com-彩票高手预测| www.19.org-怎么入侵黑彩| www.93696.cc-福利彩票推荐| www.18vz.com-泰安福彩中奖新闻| www.sd55.com-网上黑彩平台大揭秘| www.27te.com-彩票刮刮乐是陷阱| www.91or.com-彩经网怎么了| www.104916.com-好彩柠檬爆珠怎么样| www.600141.com-男子酒后买彩票| www.771241.com-二四六好彩k308| www.900783.com-彩吧p3图谜第五版| www.cp2797.com-五分快三下载应用| www.6dw.cc-分分彩助赢计划软件| www.900433.com-易经推算彩票| www.ug56.com-体育彩票开奖号| www.2zc.cc-彩票22是什么平台| www.562753.com-哪些高频彩是国家的| www.010123.cc-分分彩官方开奖| www.151550.com-彩经彩票新版走势图| www.8ak.com-体彩14场对阵表| www.pa59.com-乐彩网工具图标| www.809173.com-七星彩几率-| www.oq60.com-陈赫中彩票-| www.2003.red-易彩彩民福地登录的| www.509703.com-利赢国际彩票合法吗| www.697489.com-菲律宾官方五分彩| www.xp48.com-体彩快三35期| www.2406.vip-搜神传好彩妹真名| www.32986.com-体彩七位开奖| www.052826.com-进球彩app-| www.174807.com-快三哪几个省有| www.047010.com-51彩票首页-| www.1390.top-手机竞彩哪个软件好| www.8713.xyz-大通彩票直播网址| www.35279.cc-福彩输了很多钱| www.bp84.com-竞彩篮球nba| www.920961.com-怎么下载彩神争霸| www.79132.com-手机彩铃制作| www.062379.com-彩乐园2下载安装| www.79386.com-香港代退彩金被骗| www.34318.com-福彩全麦必中解太湖| www.151.cm-彩虹张惠妹反同恋| www.cd01.com-体彩三-| www.99423.com-分分彩是正规的吗| www.144143.com-关小刀足彩预测推荐| www.85545.cc-福彩群英会人物编号| www.637397.com-彩虹六号女干员漂亮| www.713848.com-七色彩-| www.788443.com-彩礼谈判-| www.869028.com-七星彩各个对数| www.931413.com-买彩票中奖法术| www.983639.com-幸运国际时时彩| www.ja5.com-内苎快三-| www.oc19.com-360彩票购彩网| www.786868.com-彩世界北京赛车| www.su50.com-彩票的规则是什么| www.529092.com-附近的体彩销售点| www.845630.com-福利彩票历任主任| www.078996.com-七星彩杀号彩经网| www.195437.com-福彩三地基本走势图| www.380126.com-湖北福利快三预测| www.590395.com-3d彩票试机号今天| www.hj56.com-彩票过滤软件排名| www.42ax.com-足彩胜负平比分直播| www.2800.bid-好彩0567app| www.548189.com-幸运28彩票怎么玩| www.uz9.com-彩票123导航| www.8879.loan-足彩基础知识| www.179356.com-江苏快三输钱的原因| www.588371.com-五彩连珠单机版下载| www.661248.com-时时彩稳计划app| www.759962.com-老时时彩计划| www.826355.com-互娱网彩票快3| www.890554.com-中彩网统计图表| www.950927.com-中彩网开挂-| www.993010.com-彩票下载下-| www.hu71.com-七星彩808彩票网| www.778776.com-釉上彩安全吗| www.843475.com-山东体育彩票客服| www.905836.com-亚搏彩票app| www.960111.com-被骗到菲律宾卖彩票| 818合彩www.www.9889hc.com| www.969242.com-彩虹计划官网| www.aj40.com-七星彩兑奖规律表| www.353859.com-三d福彩直播| www.0732.net-福乐彩28是什么| www.062289.com-双色球彩神通软件| www.291058.com-乐彩首页-| www.566069.com-搜狗彩票网官网| www.771050.com-最新重庆时时彩预测| www.984683.com-彩民中三次500万| www.6698.vip-全部彩票软件| www.64665.com-竞彩高手打法| www.366522.com-彩票五行属于什么命| www.556818.com-苹果彩票线路| www.797882.com-时时彩一条龙| www.762183.com-外围足彩下载| www.ut72.com-天天彩票论坛con| www.359013.com-彩票都是骗穷人的| www.521948.com-亿彩网app下载| www.112603.com-江苏快三工具| www.178138.com-手机买彩票怎么买| www.242694.com-大发快三官网开奖| www.309155.com-天津时时彩玩法说明| www.378863.com-体彩7星彩兑奖时期| www.470289.com-买足彩属于赌博吗| www.92925.com-岩棉彩钢板规格| www.23733.cc-天天中彩票彩种升级| www.963325.com-七星彩基本走走势图| www.bo14.com-一分快彩app| www.168755.com-北京快三玩法| www.301074.com-打鱼送彩金-| www.121239.com-福彩3d平台微信| www.94xk.com-足彩分析微博| www.800768.com-福建体彩票11选五| 博亿彩票www.622by.com| www.462225.com-黑彩在哪里买| www.779229.com-天天时时彩票| www.495060.com-金彩网马经-| www.056109.com-彩票有5位数吗| www.xh20.com-双彩论坛3d和值谜| www.7818.shop-博彩宝马网站| www.400.tv-福彩3d4码出2| www.3071.org-即开型体育彩票技巧| www.8235.cm-足彩今日强胆| www.585018.com-三地开奖结果彩票| www.984357.com-广州鸣彩传媒电话| www.s05.cc-那种彩票可以玩单双| www.64pt.com-足彩概率指数| www.316263.com-今天上海快三推荐号| www.385059.com-博发彩票网站| www.78809.com-福彩3d高手经验谈| www.cai0222.com快三是国家允许吗| www.481321.com-喝彩中华2019| www.548996.com-港澳生肖彩手机版| www.35jv.com-加拿大彩票免税| www.9580.me-百强彩票官网| www.57967.cc-双色球中奖彩票票面| www.006828.com-彩金宏辉游戏机厂家|