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.700812.com-福彩通网址-| www.213965.com-三分快三计划稳定| www.376953.com-体育彩票的行业前景| www.533552.com-举报明发彩票| www.642568.com-博荣彩票下载安装| www.887680.com-阿里巴巴彩票合法吗| www.063745.com-福建体彩22走势图| www.999455.com-什么彩票网站好| www.ln79.com-709彩票-| www.2327.wang-快三半顺是什么| www.967.org-七星彩随机-| www.485486.com-中金彩票-| www.221837.com-百彩网资料大全| www.8494.com-彩虹彩票是真的假的| www.152404.com-快三线上2线| www.591000.com-徐州中两千万彩票| www.771741.com-昆山快三开奖昨天| www.878625.com-飞彩网是合法的么| www.967348.com-网络黑彩破案困难吗| www.cp606.cc-湖北福彩快三遗漏| www.ng15.com-乐优炫彩下载| www.41465.com-3d彩票报纸图| www.506190.com-柏林娱乐时时彩骗局| www.586958.com-最新亿彩彩票下载| www.666109.com-超市活动送彩票| www.982710.com-广东好彩一预测推荐| www.561977.com-验证手机送18彩金| www.358264.com-七星彩特区空白长条| www.514760.com-河南民权彩礼多少| www.660872.com-竟彩容错过关| www.750030.com-福彩3d断组解密| www.833523.com-彩44app-| www.919448.com-三分时时彩是假的吗| www.986574.com-9158彩票-| www.ef96.com-体彩究竟是不是骗局| www.076203.com-256时时彩票下载| www.934480.com-即时开彩新版| 天天彩票www.106569.com| www.vy54.com-体彩四码组三遗漏| www.cj87.com-一分快三有稳赢秘诀| www.l77.net-彩票二元网-| www.67ns.com-c78彩是真是假| www.0662.hk-彩票选号来自灵感| www.9077.loan-重庆寸时彩遗漏查询| www.891120.com-快三qq稳定群| www.968485.com-体育彩票双色球作弊| www.cp0550.com-瑞彩祥云-| www.798096.com-易彩网怎么下载| www.018493.com-彩票55倍-| www.945963.com-福建彩票31选七| www.132127.com-河南农村彩礼现状| www.37tw.com-七星彩前四计划| www.1749.vip-鸿彩直播间-| www.550040.com-足彩致富-| www.617403.com-中彩网高手三肖六码| www.693900.com-彩票票面-| www.772984.com-6188彩票软件| www.036533.com-老彩民投注平台网站| www.245554.com-网易快三彩票| www.391517.com-网易彩票关闭了吗| www.396392.com-彩虹影视纯a影库| www.554617.com-体彩基础知识教程| www.79583.com-超级尼彩5手机| www.909486.com-盈彩彩票-| www.978903.com-河南快三兑奖日| www.yn2.cc-黑彩票平台提现技巧| www.5905.vip-榆次福彩中心| www.173896.com-彩神x-| www.182370.com-福利彩票自动选号| www.127429.com-日彩网输钱怎么办| www.85851.com-安徽福彩中心位置| www.212268.com-彩票开挂神器下载| www.317612.com-双色球彩民心得| www.394498.com-足彩复式投注怎么算| www.365846.com-彩铅画渐变教程图解| www.972388.com-福彩3d排列三魔图| www.nj10.com-竞彩蓝球专家推荐| www.362467.com-快乐彩前三直走势图| www.539393.com-时时彩有追杀模式吗| www.55208.com-王博士彩票中奖秘籍| www.as15.com-彩票走势的研究方法| www.763888.com-中彩在线真的假的| www.865142.com-福彩3d微信讨论群| 彩82www.c1636.com| www.nh49.com-快三单式中奖号码| www.09li.com-大通彩票注册官网| www.913507.com-彩客网页版-| www.413823.com-胜负彩奖金计算器| www.576287.com-福彩排三千禧试机号| www.650773.com-十字彩网站-| www.713601.com-怎么看彩票大小单双| www.799985.com-福彩7乐彩走势图| www.15122.com-体彩20选5浙江| www.81781.com-甘肃私彩赌博| www.993944.com-河北快三出球顺序| www.lh00.com-中彩网注册邀请码| www.29.biz-足彩赚钱的人多吗| www.206.cm-秋天彩铅画图片落叶| www.4432.net-网上买快三能挣钱不| www.692689.com-辽宁体彩网一选五| www.788882.com-天价彩礼-| www.859269.com-933彩票登入网址| www.944425.com-体彩彩票骗局| 快彩www.81678l.com| www.37226.com-福建体育彩票走| www.5503.top-福彩银行充值| www.15163.com-杭州体彩兑奖地址| www.58155.cc-七乐彩大奖-| www.584595.com-拼博在线彩神通| www.674199.com-方和彩一-| www.743173.com-糖果派对彩金图片| www.806870.com-香港赛马会投网彩票| www.279449.com-分分时时彩龙虎特点| www.50560.com-七星彩解码诗| www.89805.com-全国竞彩销量排行榜| www.71522.cc-大雁团队时时彩计划| www.9936.in-江苏福彩双色球走势| www.50810.com-888彩票123-| www.006570.com-5分⑥和彩计划| www.39409.com-全民彩票真假| www.824503.com-有app博彩软件| www.693856.com-彩77彩票怎么样| www.920895.com-今天体彩比分直播| www.020237.com-网易彩票网网址| www.2570.net-趣趣彩票-| www.141136.com-老猫出彩快讯3d| 天天彩票www.2373r.com| www.679134.com-遗言彩票-| www.864608.com-网络黑彩报警有用吗| www.393182.com-家乡风景画彩铅画| www.06444.com-新浪网彩票开奖直播| www.970397.com-天天乐彩038| www.cai2323.com彩票快3技巧| www.gx99.com-天天彩票软件大全| www.781870.com-网易彩票投注可靠吗| www.855465.com-中国亿元彩票排行榜| www.912170.com-彩客网比分直播彩票| www.976238.com-遵义订婚彩礼怎么给| 如意彩票www.833585.com| www.mt26.com-中彩网历史开奖软件| www.15xy.cc-爸妈要100万彩礼| www.133854.com-六开彩网上开奖结果| www.196335.com-竞彩8442万大奖| www.250116.com-505彩票安卓版| www.261566.com-宁夏福彩快三选号| www.498890.com-福彩足球玩法| www.964865.com-彩票快乐十分钟输惨| www.cai1115.com江苏快三是不是骗局| www.k96.net-福彩快三到底有多坑| www.713788.com-河北快三走势图天的| www.54ok.com-贵阳花果园彩票店| www.qi98.com-彩8彩票下载安装| www.682789.com-黑彩平台排名前10| www.781277.com-河南福彩幸运| www.cai4277.com内蒙快三开桨| 500彩票www.690477.com| www.oh55.com-皇都彩票登陆| www.v25.pw-彩吧天中图总汇| www.50qh.com-大成彩票下载| www.49rp.com-彩票平台55倍| www.8404.pw-澳洲五分彩-| www.cai9933.com今日快三开奖走势图| www.548708.com-聚胜365彩票| www.613783.com-大丰彩票下载|