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天

知道了
彩票123现在叫什么名字 www.967843.com-群带彩票-| www.139443.com-亿百彩票-| www.604816.com-红运彩软件-| www.932555.com-快三平台怎么查| www.554434.com-福利彩票广告语| www.73910.com-七彩旗-| www.087717.com-甘肃快三投注必中| www.492406.com-广西体彩站电话| www.929419.com-香港中彩网开奖结果| www.020438.com-彩38是黑彩-| www.92698.com-九亿彩票网站注册| www.cp2032.com-安徽福彩快三开奖| www.74xp.com-大乐透彩票分几种| www.9274.cc-乐彩网提现不了| www.763138.com-大乐彩-| www.11br.com-彩钢瓦漏水怎么办| www.638.in-分分3d彩网站| www.6638.me-双彩网安全吗| www.22776.cc-吉林快三案-| www.65420.com-青海福彩大奖| www.796588.com-众博彩票网-| www.884501.com-福彩三地走试图| www.yt09.com-安徽快3彩票| www.39au.com-大发快三助手| www.865.in-简单彩铅画入门画| www.dg49.com-福利彩票有哪些彩种| www.682494.com-广州好彩酒家门店| www.500033.cc-078彩票网址多少| www.905414.com-足彩任九技巧| www.04ab.com-体育彩票销售点编号| www.0524.cn-福彩期3d开奖结果| www.18978.com-彩票店买私彩| www.640070.com-那种彩票有漏洞| www.56616.cc-张家口市彩票中心| www.026474.com-竞彩篮球合买推荐| www.932891.com-118彩票软件平台| www.09nd.com-福建体彩泉州乐聊天| www.899.tv-菩提咒买彩票| www.29893.cc-乐彩175000-| www.52187.cc-最赚钱的高频彩种| www.118149.com-鼎汇彩票是骗局揭秘| www.290128.com-海南四合彩票| www.77192.cc-老彩民平台怎么样| www.127078.com-彩铅画真人-| www.217701.com-幸运彩票是不是骗局| www.448839.com-浙江省彩票开奖号码| www.2853.biz-网上禁止买彩票了吗| www.141272.com-58彩票旧版首页| www.951009.com-福利彩票破解软件| www.400257.com-2017体彩杯沈阳| www.539451.com-彩票店前景-| www.636763.com-带彩虹的儿歌| www.937213.com-五福彩票登录平台| www.al49.com-七星彩500-| www.785238.com-七星彩专家推荐汇总| www.523131.com-92彩票下载-| www.688682.com-105彩票正规吗| www.033759.com-如意彩app-| www.577616.com-彩虹糖颜色味道| www.664892.com-生肖彩开奖必中六| www.91666.cc-青海省体彩任5| www.320825.com-推荐的足球彩票| www.486601.com-呼市转彩票机流程| www.597100.com-赛马结果派彩| www.699212.com-体彩开奖中国| www.839466.com-竞彩足球单固| www.947700.com-众彩网程远预测专家| www.ai93.cc-我想查一下福利彩票| www.12jp.com-吉林快三和值列表| www.1322.com-乐彩33是正规的么| www.678125.com-易彩堂怎么注册| www.8568.in-乐彩网嗨少看彩| www.73800.com-新2彩票app注册| www.36939.com-十分彩app九购| www.376963.com-彩票程序的行业前景| www.522299.com-5彩票5-| www.606440.com-竞猜足彩下载| www.677994.com-快三一注-| www.767393.com-金百万福彩3d| www.850328.com-1分快三开奖历史| www.907296.com-网上彩票app下载| www.969290.com-505彩票计划网址| www.cp1113.com-彩票平台排行榜| www.235797.com-竞彩网500-| www.965797.com-彩票标语广告| www.kz10.com-互联网彩票销售办法| www.76171.com-彩易科思回收彩票| www.916393.com-重庆实时彩历史开奖| www.3tm.com-凤凰彩票官方网| www.0732.cm-体彩店疯狂刷销量| www.9712.net-高频彩追杀-| www.65496.com-炫彩的东西有什么| www.344319.com-大发快三下期| www.576230.com-福利彩票的基础知识| www.140324.com-华宇彩票平台怎么样| www.346208.com-高频彩杀号-| www.575780.com-体彩试机号3o期| www.735191.com-彩票哪种比较容易| www.088581.com-权威彩神网-| www.187166.com-分分时时彩app| www.486999.com-周易预测彩票算法| www.831120.com-盛兴彩票v3线路导| www.977974.com-彩钢瓦围挡效果图| www.oa62.com-百盈快三规则| www.061005.com-亿彩时时彩计划网| www.440520.com-老赖可以中彩票吗| www.654800.com-时时彩号码复式器| www.835023.com-缅甸忠告好彩| www.974357.com-福彩一周开奖几次| www.ci40.com-吉林快三害人| www.932227.com-海南七星彩结果| www.048000.com-彩票机选有中大奖吗| www.157856.com-80彩票陷阱-| www.433880.com-毕节福彩中心| www.385213.com-足彩14场中奖晒图| www.191795.com-湖北今日快三预测| www.266778.com-彩七七骗局-| www.168958.cc-安徽快三结果图| www.272593.com-电脑彩报-| www.339794.com-唐山彩票店生意转让| www.954121.com-海南4码彩票| 众乐彩票www.587244.com| www.2443.com-好彩数码印刷怎么样| www.03rg.com-发财宝典彩图| www.500016.cc-时时彩谁有群| www.580508.com-疯狂赛车彩票计划| www.133421.com-彩色地坪-| www.250155.com-安微快三开奖号码| www.348228.com-七乐彩是真是假| www.415420.com-彩掌柜app下载| www.518147.com-体彩大乐透谜语| www.585061.com-66好彩分分彩| www.640828.com-红耀彩票-| www.698590.com-vip8彩票网-| www.768792.com-天猫彩票是什么东西| www.21oq.com-彩688下载-| www.135.cc-天津彩民之家彩店宝| www.sf22.cc-五分时时彩开奖| www.131060.com-洛阳结婚彩礼多少| www.196575.com-百宝彩河北快三| www.252516.com-51中彩官方下载| www.318964.com-三分时时彩平台| www.so05.com-河内彩开奖号码记录| www.139877.com-体彩上海领奖地址| www.241111.cc-彩铅十大排名| www.339939.com-时时彩怎么买怎么输| www.18vi.com-七乐彩一周开几次奖| www.492555.com-唐山龙北彩票站黑彩| www.602082.com-打彩票费不费钱| www.722585.com-天空彩天下彩| www.810721.com-一等奖彩票网| www.906168.com-平台出租彩票| www.cp0308.com-北京官方快三助手| www.088957.com-海南体育彩票| www.0701.xyz-彩票网站建设ag| www.fl37.com-江苏福彩中心官网| www.zw93.com-体彩竞彩申请| www.303366.com-七彩链接-| www.39ya.com-安装凤凰彩票网| www.290.cx-安徽双色球彩票官司| www.2911.in-腾讯五分彩规则| www.8432.pw-做时彩网站违法吗| www.24101.com-中国的彩票太假了| www.970427.com-彩票赚佣金的方法|