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天

知道了
亚洲28 www.4785.xyz-7w彩票-| www.328633.com-江苏福彩3d论坛| www.527010.com-万利博时时彩提现| www.735866.com-中国彩吧图库第一版| www.919386.com-体育彩票店有假的吗| www.105028.com-华人彩登录注册网| www.95193.com-彩票拍照兑奖| www.08592.com-3d彩票几点开奖| www.63141.com-彩宝大乐透预测推荐| www.110545.com-网络福彩是不是骗局| www.296757.com-360彩票开奖对比| www.423875.com-博彩账号被冻结找谁| www.557633.com-福彩≡地三三| www.655565.com-体彩彩票中奖分布| www.739339.com-多盈彩票网址| www.853144.com-大红鹰彩票红包| www.947019.com-全天重庆彩计划蜂巢| www.cai0699.com广西快三开奖结果今| www.777767.com-鼓励买彩票的图片| www.930034.com-群英会彩票-| www.985904.com-查体彩5d中奖号码| www.xs2.cc-湖北福彩3d走势| www.qp83.cc-中国福利彩票票种| www.13ec.com-福彩3d高手有没有| www.402.biz-彩投彩票网官方网| www.893177.com-超級彩票助手| www.965498.com-百盈时时彩计划全天| 多乐彩票www.544646.com| www.15ox.com-彩票店内装饰图| www.435383.com-快三号-| www.539945.com-助赢彩票软件手机版| www.333885.com-体彩一共几个数字| www.958873.com-湖北福利彩票新彩种| www.7nv.com-彩铅手绘食物教程| www.79lh.com-福彩晚秋-| www.2025.in-彩虹六号ul战队| www.560963.com-恒彩彩票官方网站| www.l15.top-人人中彩票客服电话| www.420732.com-金手指买彩网| www.530916.com-时时彩本金投注比例| www.811091.com-书手机彩票-| www.896922.com-昆明90后中彩票| www.966810.com-快乐彩胆拖速算表| 凤凰彩票www.452815.com| www.409338.com-七星乐彩票正规吗| www.060610.com-琼海私彩老板| www.286064.com-河南快三软件下载| www.12wt.com-app809彩票-| www.52433.cc-yy彩票下载手机版| www.53je.com-135cc彩票下载| www.0396.cc-彩票店出票的软件| www.cp7566.com-下载北京快三助手| www.864688.com-凤彩网登录-| www.36547.com-3000万彩票网址| www.515389.com-怎么网上买七星彩票| www.278.mobi-彩妆加盟店视频教程| www.672388.com-七星彩专家测号| www.755261.com-中彩网投注怎么付款| www.48xv.com-彩票站点怎么开| www.t24.com-彩尊怎么样-| www.361503.com-海口七星彩大师预测| www.27698.com-cp533彩票官网| www.2786.cn-手机体彩山东| www.473323.com-福利彩票快3陕西| www.560668.com-什么是澳洲三分彩| www.631055.com-看彩票开奖大乐透| www.704660.com-彩票凭密码兑奖| www.948994.com-国彩彩票下载| www.0550.pw-关于快三的彩票软件| www.567.gg-时时彩怎样分辨虎龙| www.8750.com-七星彩早版湛江版区| www.788956.com-竞彩的专家的重要性| www.8126.loan-福彩3d试机号金碼| www.224554.com-彩神ll网页登录| www.lv09.com-大发时时彩计划交流| www.5vp.com-80彩票网站-| www.94lo.com-10彩票-| www.963824.com-斗鱼刮彩票怎么玩的| www.ga6.cc-彩票九宫图-| www.603793.com-18058足彩分析| www.715931.com-彩票平台程序妙招| www.788986.com-红五福彩三d| www.863958.com-体彩开奖信息记录| www.922058.com-地区快三计划| www.981550.com-怎么举报福彩| www.c6.cm-爱乐彩平台关了| www.mw19.com-网络官方彩票app| www.335974.com-彩票振幅走势图| www.28993.cc-爱普生彩色打印机| www.84200.cc-中国体彩客服| www.3399.date-哈尔滨松北好彩酒店| www.29383.com-海南彩开奖记录| www.98hj.com-炫彩陀螺下载| www.128887.com-环球彩票ahd| www.389628.com-如何加盟福利彩票| www.572654.com-彩专家大牛-| www.648669.com-江苏双色球快三| www.783052.com-燕郊彩票站转让| www.925817.com-彩富网天空彩天| www.cai665.cc-贵州快三基本走势图| www.173532.com-兰州快三走势图连线| www.9877.loan-淮安最新彩票店转让| www.56893.com-彩神吧-| www.95021.com-福彩内部号的qq号| www.ul43.com-福彩3d阴阳走势| www.460051.com-凤凰iii彩票| www.812492.com-快三多少倍能封顶| www.0866.top-lb快乐彩下载| www.926859.cc-彩票达-| www.152817.com-126官方彩票注册| www.944936.com-一分彩平台-| www.543858.com-彩吧谜图第一版| www.626798.com-买彩票随机还是自选| www.696864.com-时时彩专业版软件| www.788398.com-中国彩计划网| www.854186.com-多彩网投注可靠吗| www.947664.com-彩票投注资金策略| 福彩网www.5522d.cc| www.74ss.com-幸运彩票提现不到账| www.5332.biz-彩558彩票-| www.52718.com-彩73下载-| www.005914.com-下载广西福利彩票| www.067712.com-彩票计划下载手机版| www.247058.com-微信玩快三犯法吗| www.24170.com-彩铅画画上色技巧| www.67408.com-彩票九合法么| www.107220.com-黑客攻击时时彩| www.198095.com-福彩讨论平台| www.182333.com-竞彩血的教训| www.151210.com-澳客彩票缩水软件| www.4wv.cc-双色球彩票纸怎么看| www.055978.com-预测河北快三出奖| www.717753.com-城市彩铅画-| www.790702.com-3d福彩过滤器苹果| www.798572.com-彩票中200万图片| www.903263.com-幸福彩票靠谱吗| www.975869.com-河南驻马店彩礼| www.cai733.cc-快三计划软件| www.hv90.com-众彩网专家汇总| www.wc66.com-福利彩票开奖结果| www.082601.com-北京快三开始时间| www.213948.com-人人红彩票app| www.579758.com-体彩19069期| www.657309.com-哪些游戏机出彩票多| www.720300.com-广州福彩中心在哪里| www.795088.com-新未来彩票下载安装| www.50ug.com-体彩七星彩奖池余额| www.1014.org-快开彩开奖直播| www.582160.com-彩879平台靠谱吗| www.fi09.com-所有的彩票网站大全| www.xq29.com-体彩足球14场奖金| www.003002.com-彩票3d之家首页| www.072204.com-开彩票店怎么提成| www.6386.in-3d福彩3d乐透乐| www.221792.com-彩票挂机-| www.860767.com-福彩快3安徽查询| www.834550.com-欧盟好彩爆珠| www.615890.com-哈尔滨福彩兑奖地址| www.9922.hk-江苏快三有多少年了| www.238869.com-有一种套路叫彩票托| www.271743.com-神州彩票app网址| www.4897.cc-彩票代打什么意思| www.787579.cc-体彩排3走试图| www.839334.com-快三绝杀二码技巧|