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.691872.com-澳客足彩任九场| www.26067.com-一年级彩虹仿写| www.cai1466.com彩票app大全| www.ul42.com-体彩排五走势综合图| www.80dr.com-彩票能信吗-| www.057135.com-怎样注册彩票网站| www.191171.com-甘肃快三和尾走势| www.5703.com-黑客入侵时时彩教程| www.171843.com-贵州福彩开奖结果| www.280901.com-重庆市福利彩票官网| www.510508.com-体育彩票是骗局吗| www.589601.com-台湾六星彩开奖现场| www.12kg.com-天天爱彩票ios版| www.89rf.com-老郑足彩微博| www.385727.com-足彩几点停售| www.682424.com-公益时报中华彩票| www.833665.com-彩票复式投注计表| www.963107.com-彩钢瓦规格-| www.f86.loan-华人彩是真的么| www.059995.com-5亿彩app下载| www.526372.com-彩民彩票世界杯玩法| www.99279.cc-新浪五分彩-| www.138479.com-竞彩大赢家实体店| www.053291.com-胜负彩推荐-| www.281971.com-浙江体彩61开奖| www.588901.com-丹麦快乐彩开彩直播| www.076508.com-体育彩票大全| www.08478.com-3彩票开奖结果| www.543459.com-彩报二版-| www.661978.com-竞彩比分可以穿几场| www.771720.com-51计划重庆时时彩| www.859281.com-山西体彩快乐十分钟| www.950737.com-专业玩彩双色球推荐| www.608598.com-像好彩投一样的网站| www.789497.com-中国竞彩网推荐| www.bg32.com-福彩新快三-| www.018387.com-158彩票合法吗| www.108738.com-竞彩胜平负计算器| www.251785.com-福彩15选5派送奖| www.63rp.com-福利彩票自动销彩机| www.8507.top-竞彩可以投资么| www.72171.com-966官方彩票下载| www.53610.com-盐城竞彩店-| www.185884.com-快三应该怎么玩| www.091365.com-全民连中彩票| www.dx69.com-三分快三下载安装| 至诚彩票www.401746.com| www.138159.com-七星彩彩票对比器| www.510910.com-天津彩民之家彩店宝| www.224267.com-彩神ll邀请码| www.882764.com-基诺彩票怎样中奖高| www.960730.com-9388彩票-| www.gy7.cc-江苏快三多少组号码| www.ql01.com-北京福彩一定牛快3| www.15.me-中国副利彩票官网| www.25tp.com-微信彩票国家承认吗| www.954510.com-彩彩票-| www.704426.com-彩票336网页版| www.h32.club-上海爱乐彩快三| www.0404.wang-96.cc彩票至尊| www.203861.com-彩迷计划-| www.344535.com-106期福彩阳光图| www.618922.com-济南市体彩领奖中心| www.725704.com-中工彩双色球网站| www.813577.cc-贵州快三派奖奖金| www.62893.cc-竞彩足球混-| www.050921.com-彩票网站诈骗任务| www.1322.xyz-求幸运快三计划软件| www.015424.com-乐佳商城彩票合法吗| www.102519.com-马来3分彩-| www.328970.com-福彩双色球38期| www.602201.com-掌上彩票不能用了| www.76556.cc-买彩票中奖的故事| www.0578.in-3d乐彩论坛陈华| www.37577.cc-福彩抽汽车-| www.064867.com-返点9的彩票平台| www.216819.com-江苏快三彩票| www.528022.com-体彩一年销售额多少| www.217764.com-幸运快三骗局| 趣彩网www.qucp3.com| www.23vx.com-微信里面怎么买彩票| www.42949.com-天津七星彩开奖结果| www.023876.com-怎么从彩迷中走出来| www.58936.cc-天空彩票与大同行| www.086622.com-彩票售卖机合法吗| www.751352.com-今日彩靠谱吗| www.1098.cc-时时彩长龙规律总结| www.06762.com-河南省体育彩票网| www.975713.com-长葛彩礼一般给多少| www.p85.org-9万彩票官网| www.098112.com-购彩排行榜-| www.372257.com-福彩3号试机号| www.436398.com-九州彩票平台网站| www.016339.com-彩票k线图apk| www.249876.com-手机大彩网-| www.4851.vip-山西体彩诚招投注站| www.242055.com-新②彩票论坛| www.933959.com-五福彩票网-| 9号彩票www.80767c.com| www.66212.com-福利彩票怎么投注呢| www.563991.com-福利彩票机器| www.668570.com-华人娱乐彩票找代理| www.841647.com-七乐彩守号一注| www.936028.com-有靠买彩票发财的吗| www.fi8.cc-时时彩1996-| www.tn61.com-彩票店刷销量赚佣金| www.030095.com-香港优彩社区一| www.14vk.com-彩吧彩报等三版| www.395221.com-彩虹app下载| www.2652.pw-福建快三最大遗漏值| www.xu55.com-生无分文也敢买彩票| www.915058.com-淘彩骗局揭秘| www.976124.com-壮族彩礼-| www.qx4.com-香港中彩论坛| www.944321.com-体育彩票竞彩是什么| 幸运彩票www.572699.com| www.29918.com-开七星彩直播现场| www.680423.com-彩拾彩票正规吗| www.98eq.com-彩坛元宝独胆| www.502318.com-80选20彩票规律| www.661472.com-如何买福利彩票复式| www.801968.com-彩运网cy000| www.8432.vip-彩釉玻璃油墨| www.cp0855.com-快彩中奖助手| www.44428.cc-全民彩票在线| www.327184.com-万彩吧app苹果版| www.486029.com-飞彩网是属于彩票吗| www.623532.com-正德福神彩票| www.60fw.com-易购彩票网站可靠吗| www.3782.biz-足球彩票单场胜负平| www.52867.cc-福利彩票双色球派奖| www.967484.cc-彩票双色球开奖公告| www.et42.com-快3彩票计划| www.34yu.com-开心七星彩一手机版| www.1399.in-福彩中奖等级| www.033430.com-福建体彩官彩官方| www.826769.com-搜索三b彩票藏机图| www.973446.com-彩虹宝宝免费观看| www.ju87.cc-彩票双色球怎么玩| www.715177.com-彩票站转让合同| www.605297.com-网购彩票中大奖| www.c03.top-哪些彩票软件送彩金| www.940037.com-网上买快三怎么能中| www.4234.vip-七彩影官网下载安装| www.54297.com-中华娱乐彩票app| www.525516.com-重庆时时彩关闭新闻| www.635589.com-七彩阳光儿童摄影| www.801754.com-福彩一体机怎么样的| www.920839.com-彩票双色球中奖条件| www.1195.vip-彩票五期选号方法| www.006260.com-彩37官网下载| www.121998.com-天律时时彩开奖历史| www.518605.com-高频彩太害人了| www.713507.com-彩票猜大小的软件| www.953615.com-易彩快三高手计划表| www.qr16.com-t体彩的宗旨| www.rh14.com-天津时时彩官方平台| www.949492.com-体育彩票中奖了| www.43kj.cc-时时彩全天计划在线| www.96no.com-博彩搭建-| www.254416.com-亚博彩票app官方| www.855048.com-七乐彩杀号开门彩| www.al00.com-海南七星彩论坛| www.62911.com-竞彩赛程表-|