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.113382.com-福彩3d开奖福彩| www.883459.com-怎么制作彩票软件| www.978506.com-福福彩开奖结果| www.dm92.com-体彩7星彩玩法说明| www.11mw.com-577彩票apk-| www.784180.com-038彩票网可靠吗| www.711603.com-万豪彩票98-| www.5566.online彩票每日存送| www.306425.com-彩688-| www.98933.com-梦见彩票店-| www.140246.com-七星彩早版互换专区| www.7576.org-外围足彩赔率| www.216209.com-彩票九宫图分析法| www.ef36.com-百福彩app-| www.8329.cc-时时彩的骗局揭秘| www.44433.cc-全民彩是骗局吗| www.89611.cc-黄鹤楼迷彩烟价钱| www.bt30.com-足球博彩技巧| www.355654.com-买彩票绝技-| www.778575.com-彩6精华版-| www.277896.com-博牛彩票破解| www.22331.cc-万豪福彩大转盘| www.93858.cc-七乐彩杀号技巧| www.3087.org-江苏快三全能版计划| www.453432.com-熊猫彩滨-| www.901532.com-福彩3d今天出奖号| www.882191.com-彩票计划师是真的吗| 福利彩票www.78700n.com| www.40cw.com-七星彩投注截止时间| www.390051.com-买彩票亏了几万元| www.558534.com-精彩中国-| www.645139.com-中国最大快三| www.014722.com-七星彩1对数是什么| www.221525.com-彩票123上网导航| www.79989.cc-金金彩票-| www.35826.cc-爱乐透彩票过滤网站| www.66bn.com-华彩赢家是假的吗| www.188413.com-安徽快三倍投| www.65498.com-炫彩材料-| www.071783.com-香港管家彩图| www.499163.com-代打彩票的的制度| www.603787.com-彩票开奖今天3a| www.678406.com-福客来彩票网址| www.766105.com-彩客网比分直播竞足| www.852908.com-彩16幸运28下载| www.930415.com-七星彩梦兆册查询| www.bz57.com-快三哪个平台正规| www.n10.org-那个网上可以买彩票| www.117.gg-今晚3d彩报图片| www.3843.wang-中国福利彩票的政策| www.9749.in-彩八仙计划app| www.62755.com-七星彩局王图纸长条| www.024762.com-江西省体彩网| www.105897.com-如何买国外的彩票| www.9659.cc-万彩app怎么样| www.57377.cc-福彩3d相年富图迷| www.003878.com-盈彩网站首页| www.757402.com-大鹏金服乐彩| www.192511.com-一定牛江苏快三预测| www.449923.com-七乐彩带座标走势图| www.20jh.com-龙虎合微信时时彩| www.626966.com-竞彩怎么买中奖率高| www.772431.com-菲律宾博彩推广| www.cai6669.com大发快三开奖软件| www.ru70.com-90在线彩票骗局| www.sl07.com-老重庆时时采彩开奖| www.045889.com-天天彩票软件下载| www.051041.com-彩票平台代理找谁做| www.10801.com-最好的彩票销售软件| www.556155.com-福利彩票广告| www.976063.com-彩礼分手-| www.998219.com-七星彩加急版早版区| www.ow65.com-双彩论坛3d字谜解| www.144377.com-竞彩2c1保本对冲| www.op4.com-甘肃快三摇奖| www.229705.com-彩票站点大全软件| www.382729.com-七星彩16-| www.639070.com-体育彩票设备| www.771315.com-丰大彩票登录| www.646927.com-胜负彩怎么中大奖| www.175717.com-快三中奖助手苹果版| www.059.in-福利彩票店返点| www.l71.com-天天彩票软件靠谱吗| www.297153.com-数学老师买彩票| www.810902.com-临沂体彩转让信息网| www.359287.com-彩票最晚几点买| www.83142.com-彩票打票的教程视频| www.215564.com-即开型彩票骗局| www.098849.com-福彩包括哪些种类| www.355940.com-中国彩吧论坛开奖| www.954882.com-澳洲5分彩能赢钱吗| www.245555.com-8k易彩快3-| www.557725.com-开乐彩那里有卖| www.795863.com-天天好彩-| www.223716.com-竞彩足球开奖结果| www.ci01.com-彩票网站哪个好| www.25327.cc-福彩真的假的| www.062932.com-老时时彩下载| www.792822.com-彩票中奖了怎么联系| www.222776.com-五分快三免费计划网| www.189317.com-福彩3d组六胆拖| www.656482.com-彩神帝大发快三| www.567919.com-江苏快三中彩乐| www.188586.com-爱彩乐app下载| www.255703.com-买快三的方法| www.72800.com-吉林省福彩12选5| www.988566.com-幸运中彩票-| www.373642.com-大大星彩票走势图| www.383682.com-今晚彩票中奖号多少| www.616013.com-深圳市福彩兑奖地址| www.id42.com-怎样制止老公买彩票| www.887.date-彩票中过二等奖吗| www.17uv.com-七乐彩31期奖号| www.08967.com-福彩3d群聊微信号| www.12vl.com-彩票站一会一开奖的| www.07073.com-福利彩票真实可靠么| www.224502.com-发彩网真能赚钱吗| www.80202.com-河北体彩每周开奖| www.984097.com-福彩3d宣传-| www.eu55.com-时时彩苹果官方版| www.1xx.com-怎样最容易中彩票| www.49vc.com-十四场足彩比分直播| www.363261.com-七色彩虹蛋糕的寓意| www.152947.com-安徽福彩下载| www.130966.com-河南许昌彩礼多少| 大赢家彩票www.599647.com| www.290212.com-普通彩铅画星空教程| www.25640.com-彩库网-| www.16tx.com-体彩排五彩票| www.74305.com-彩票追加和翻倍区别| www.917505.com-3d多彩颗粒漆| CP701www.627793.com| www.593810.com-下载够力七彩奖| www.el08.com-重庆时时彩开壮结果| www.577948.com-体彩机选-| www.856528.com-七星彩经典彩版| www.723.mobi-时时彩技巧总结| www.lc16.com-505彩票网站| www.118486.com-博彩代理怎么赚钱| www.440374.com-4c彩票送金-| www.919050.com-3a彩票平台-| www.528828.com-竞彩实体店怎么申请| www.566878.com-彩虹六号nokk| www.770082.com-七彩云南图片| www.zt47.com-彩98-| www.331686.com-彩票表格制作教程| www.347956.com-众乐彩快3-| www.548887.com-锋彩tv版直播| www.7471.com-七星彩即时开奖| www.008011.com-今天七乐彩开奖| www.130458.com-彩票网站怎么盈利的| www.279619.com-时时彩规律计算公式| www.723072.com-双色球开机号中彩网| www.fl7.com-彩票非法卖-| www.zh83.com-福彩3d之双彩论坛| www.56oj.com-腾讯分分彩靠谱平台| www.2097.cn-南京彩票店生意转让| www.9679.net-排列三电脑彩宝网| www.011132.com-昨日福彩开奖号| www.110715.com-够力七星彩解梦码| www.211034.com-如何玩快彩-| www.312753.com-淘宝彩票客户端| www.414703.com-绿好彩哪里可以买到| www.547711.com-十大彩票巨奖得主|