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.986789.com-快三的奖金是多少钱| www.102575.com-中彩网注册-| www.33248.cc-中福十分快三| www.87413.com-买彩票的都是穷人| www.395848.com-体彩星期走势| www.137416.com-时时彩返点怎么设置| www.279712.com-三分时时彩软件| www.460085.com-扑克彩票机合法吗| www.646618.com-高频彩票职业彩民| www.867477.com-特区彩票排列五论坛| www.rx41.com-中彩网登陆-| www.66336.com-京东计划彩-| www.182087.com-官网彩票app快3| www.625856.com-鑫彩娱乐平台登录| www.788271.com-2019年彩礼法律| www.971230.com-彩16下载地址| www.u14.com-深圳福彩投诉| www.51616.com-旺彩体育-| www.043335.com-中国福彩彩吧助手| www.9077.online福彩三地太谜语| www.653587.com-北京彩票中心| www.9860.vip-我的彩票app| www.261319.com-彩八彩票下载| www.688148.com-福彩3d交流群| www.886241.com-vba编写彩票程序| www.57pz.cc-鼎盛国际时时彩| www.980632.com-陕西福彩快3| www.47ue.com-中国移动彩铃设置| www.8jc.cc-爱彩靠谱吗-| www.77yx.cc-博彩公司收购银行卡| www.1443.cn-大赢家彩票| www.7733.date-腾讯分分彩走势图| www.007252.com-吉林快三精准计划网| www.931539.com-体彩怎么申请开店| 500彩票www.26299a.com| www.wl76.com-体彩开奖查询彩票| www.p50.org-福利彩票快3规则| www.5330.biz-微信上买彩票中奖了| www.51179.cc-彩之源app注册| www.285608.com-重庆时时彩玩法| www.369277.com-下载最新彩票| www.501805.com-基诺彩开奖结果| www.635010.com-银川七彩艺校好不好| www.827383.com-澳门博彩骗局| www.977264.com-高价彩礼国家不管吗| www.sy10.cc-福彩怎么算中奖| www.72kr.com-出什么奖了七星彩| www.746363.com-8亿彩app苹果| www.50868.com-广东高频彩票| www.09633.com-快三怎么分析大小球| 500彩票www.507477.com| www.355948.com-谁中过彩票大奖| www.z57.cc-元代红绿彩瓷器特征| www.569812.com-三分彩全天-| www.93yv.com-重庆5分彩官网| www.30ft.com-我要看体彩开奖| www.307.live-彩票365提现冻结| www.3251.com-下载福彩门户| www.698380.com-彩客网完整-| www.845740.com-彩票案件-| www.915036.com-淘宝买的彩票靠谱吗| www.984835.com-乐八彩票网址| www.246448.com-广西快三最大遗漏值| www.874461.com-双色球专家说彩| 500彩票www.51515h.com| www.709362.com-星海彩票口碑咋样| www.899903.com-福利彩票投注站申请| www.u66.me-现金彩票平台怎么样| www.35582.cc-红彩会手机版登录| www.559447.com-福彩3地图迷总会| www.472977.com-国彩快3是什么| www.579320.com-火风彩票-| www.654505.com-七星彩最新规律图规| www.725555.com-私人的体彩赌| www.791018.com-好彩泰免多少钱| www.859676.com-彩票997下载| www.919541.com-彩票app可以租吗| www.974588.com-众彩乐综合版金亚洲| www.cai1466.com彩票app大全| www.63mr.com-湖北快三余数走势图| www.k17.bid-足彩分析新浪310| www.947741.com-国家彩票软件下载| www.7985.net-博彩业属于金融业吗| www.391976.com-如何玩好快三大小| www.545579.com-福彩站申请多少钱| www.657704.com-腾讯幸运彩票5分彩| www.878161.com-体彩排列-| www.978484.com-天天好彩的生肖| www.hh19.com-全能中彩彩票下载| www.761675.com-竞彩足球直播app| www.936871.com-七乐彩的奖金| www.89640.com-广州彩钢板-| www.179947.com-福彩时时彩快3| www.566586.com-彩虹小鸡动画下载| www.019501.com-福彩三d几点开| www.0783.xyz-哪里能在线投注足彩| www.656718.com-999彩票官方网址| www.083116.com-快三平台犯法么| www.9077.loan-重庆寸时彩遗漏查询| www.103784.com-体育彩票兑奖时间| www.481738.com-3d彩下载-| www.5844.net-亚博时时彩平台| www.529644.com-彩票双色球怎么计算| www.658773.com-买彩票错了一位数| www.344354.com-时时彩胆码计算公式| www.878235.com-500彩票娱乐平台| www.216648.com-数字彩票有规律么| www.856248.com-苏州体彩网点申请| www.55vy.com-十一选五爱彩乐| www.11222.com-在彩票-| www.9118.net-香港正板彩霸王| www.424838.com-80彩票推广码| 福彩www.26878t.com| www.52175.cc-赢钱彩票与你同行| www.397941.com-一分钟快三稳赚技巧| www.34027.com-下玩288彩票| www.9854.vip-古建彩绘图案大图| www.17578.cc-竞彩足球网易网推荐| www.98663.cc-网络黑彩有假吗| www.979992.com-体彩网上接单| www.ix91.com-内蒙快三查期号| www.3457.vip-懂彩宝双色球| www.385133.com-入侵彩票黑网站方法| www.979570.com-快三豹子算红的不| www.43up.com-竞彩混合过关高手| www.152.live-下载彩库宝典苹果版| www.9788.win-数据源一彩吧助手| www.62621.com-彩世界北京赛车| www.656643.com-新世界彩票二维码| www.7690.in-七乐彩开奖号码今天| www.32262.com-章鱼足彩爆料| www.156622.com-网上彩票赚钱平台| www.10614.com-足彩欧赔口诀| www.305997.com-刷彩app是真的吗| www.862058.com-体彩开奖公告号码| www.947205.com-福彩三天计划论坛| www.988787.com-体彩大乐-| www.nn5.cc-湖北快三骗人| www.683370.com-万购彩-| www.786028.com-幸运极速快三| www.870113.com-uc彩票合法么| www.932458.com-玩快三那个平台好| www.981225.com-彩冰淇淋视频| www.cai1466.com彩票app大全| www.235359.com-手机买福彩双色球| www.198652.com-彩票棋牌平台| www.292951.com-河南彩票网官网| www.369468.com-中彩网怎么购彩| www.496757.com-家彩网高手论坛| www.96226.cc-互娱彩票作弊器| www.051523.com-赢彩吧注册-| www.222338.com-河北快三下载| www.5111.vip-今日牛彩一句定三码| www.043033.com-福彩藏机图正板| www.130741.com-许昌彩礼多少| www.191021.com-中国快三网平台| www.372009.com-分分彩票官方app| www.518855.com-美国彩票代购平台| www.83vm.com-彩赢天下平特一肖| www.731797.com-8k彩票违法吗| www.31nm.com-彩虹下面歌词| www.156502.com-体育竞彩足球结果| www.965714.com-兼职福彩是真的吗| www.514344.com-重庆时时彩高倍中|