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.062510.com-破解彩票漏洞获刑| www.74xq.com-体彩彩票怎么买| www.298531.com-平台购彩app下载| www.388317.com-华彩一点通最新版| www.320390.com-体育彩什么时候开奖| www.269837.com-彩九有多少版本| www.365290.cc-宝典六给彩开奖结果| www.745854.com-808福彩下载| www.385680.com-精彩音乐汇2014| www.696529.com-爱彩彩票网站首页| www.776757.com-旺彩百家号-| www.867947.com-七星彩资料-| www.936508.com-彩票高配网-| www.988294.com-江西七乐彩-| www.bc48.com-火箭彩票网vip| www.899666.cc-在重庆申请福彩网点| www.983590.com-彩16网址-| www.qi4.com-马来西亚乐和彩开奖| www.6441.vip-福彩有哪些玩的| www.68592.cc-竞彩江苏店-| www.115930.com-淘必中这么玩彩票| www.356184.com-彩票自动追号计划表| www.35337.cc-彩神计划吉林快三| www.57qv.com-大乐透中大奖彩票图| www.1449.cn-海南四星彩开奖号吗| www.ka24.com-中彩彩票用户登录| www.15ix.com-腾讯75秒彩走势图| www.858.space-极彩登陆网页| www.8910.cc-今日竞彩比分神单| www.41586.com-福利彩票破解| www.92198.cc-中国体彩篮球计算器| www.062945.com-彩票挂机吧-| www.695052.com-中国竞彩网误差| www.tg2.cc-吉林快三万能走势图| www.06zp.com-彩铅画雏菊图片| www.956.cm-最简单的彩票是什么| www.7867.cn-怀孕了玩时时彩| www.127807.com-盛大彩虹岛手游内测| www.231541.com-一分一期快三计划| www.292551.com-q彩网主页-| www.355102.com-福彩3d试机谜| www.005306.com-6762彩票app| www.hc46.com-彩八彩票合法的吗| www.53os.com-大乐透彩票奖金查询| www.5987.net-体彩排列三分解| www.44233.cc-彩票出票后请核对| www.026903.com-福彩平台投注刷佣金| www.257799.com-贵州快三多少期| www.373000.com-快三助手电脑版| www.530566.com-时时彩杀稳定条件| www.652495.com-彩票故事大全| www.107018.com-快开彩怎么玩| www.554836.com-彩票冷热趋势分析| www.634104.com-北京市彩票咨询中心| www.724133.com-网上买彩票赌博| www.697605.com-海南七星彩如何包码| www.782281.com-福利彩票132| www.sv73.com-七星彩怎样领奖| www.569.tv-网上的中华彩票| www.bf28.cc-3号彩票app-| www.85ax.com-足彩定胆是什么意思| www.42414.com-金彩虹-| www.255727.com-中福快三-| www.467822.com-体彩网黑龙江新闻| www.750444.com-开机i彩票-| 爱购彩票www.3552h.com| www.cai965.com-快三赌博案例| www.ta92.com-众乐彩票的骗局| www.02ut.com-开福彩和体彩哪个好| www.406604.com-七星彩五行图| www.003594.com-开彩票店自己买彩票| www.87pb.com-那些网站可以买彩票| www.32il.com-金钱豹彩票投注网站| www.7282.pw-带彩虹的儿歌| www.77787.cc-今天七乐彩开奖结果| www.162389.com-下彩铃-| www.364376.com-世界杯彩票能用的| www.66870.com-彩票用手机怎么兑奖| www.912052.com-台湾三分彩开奖网站| www.3836.pw-河内五分彩开奖结果| www.022950.com-快三刷流水技巧| www.d34.biz-官方高频彩开奖直播| www.96zy.com-响排和彩排-| www.8550.org-游戏机里的彩票| www.061766.com-浙体彩6十1走势图| www.276543.cc-湖北快三跨度表| www.456075.com-彩票走试图首页| www.98ep.com-玩黑彩有没有挣钱的| www.8491.cc-彩贝棋牌客服| www.056064.com-官方彩种有哪些| www.263839.com-香港106官网彩票| www.432201.com-2628彩票网址| www.632956.com-3d流彩网-| www.5599.live-买彩票的正规app| www.637784.com-七星彩奖虫电脑软件| www.783714.com-福彩窝案-| www.865667.com-体彩32期-| www.978444.com-好彩客官方下载| www.9507.com-易经与彩票-| www.123503.com-双色球福利彩票中心| www.uf58.com-福利彩票中奖交税| www.1369.live-577彩票三肖| www.43uq.com-精彩的解释-| www.5942.xyz-易点彩票-| www.07nv.com-彩铅古风人物背影| www.8266.vip-8号彩票黑人平台| www.9784.cc-七星彩中奖7注| www.038820.com-7星彩开奖结果直播| www.4186.org-七彩阳光背面| www.801125.com-下载彩猫精灵| www.138506.com-重庆体彩官网首页| www.772316.com-时时彩票助手手机版| www.9858.site-古建彩绘纹样大全图| www.051269.com-全国彩-| www.362318.com-改比喻句彩虹| www.085401.com-上海快三和值十四点| www.097668.com-福利彩票年销售额| www.236549.com-联通彩票短信投注| www.429555.com-金利彩票简介| www.639741.com-牛牛彩票怎么玩法| www.832543.com-七彩云盒app| www.037796.com-快三和值奖金计算| www.9558.xyz-南粤风彩好釆3| www.47122.com-东北结婚彩礼多少钱| www.900027.com-天天竞彩app下载| www.112147.com-三亿彩票-| www.272539.com-个性彩票宣传语| www.610135.com-彩票777好不好| www.4248.cc-竞彩篮球分析| www.33121.cc-双色球彩票被洗了| www.065005.com-亚彩彩票安全吗| www.228751.com-易彩快三走势图| www.636239.com-重庆时时彩登录链接| www.030571.com-微信中国彩国际彩票| www.78qt.com-怎么买赢海南私彩| www.939092.com-网上拉人进群玩彩票| www.667165.com-乐彩沦乐彩论坛| www.11132.cc-足彩推荐在哪| www.658.cm-泉州音乐体彩聊天室| www.538021.com-重庆时彩app| www.98sv.com-许昌盛彩滴滴地址| www.653119.com-七乐彩中奖奖金多少| www.36pl.com-竞彩能长时间盈利| www.21636.cc-亿彩是什么软件| www.294414.com-彩票真假-| www.954752.com-788彩钢瓦-| www.dw45.com-吉林快三代理| www.61fn.com-福彩3d彩吧弟一版| www.92482.com-福利彩票快乐彩技巧| www.38zm.com-彩铅房子风景画图片| www.445123.com-晋城福利彩票153| www.57233.cc-彩宝宝网页版| www.753081.com-彩神88是真的吗| www.5921.club-开彩传媒-| www.539084.com-彩神一号彩票选号机| www.697611.com-清明节彩票放假| www.970149.com-台湾玩运彩-| www.29157.com-体彩排列7星彩| www.026401.com-私彩拉会员-| www.161678.com-彩乐汇安全吗| www.11sf.cc-好彩0567.平台| www.7177.net-博彩头还是博彩头| www.005084.com-福利彩票返奖率多少| www.456289.com-彩票管理机构|