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.347891.com-内蒙古体彩赛马| www.854211.com-苹果pp彩票app| www.292.cm-没山没海靠七星彩| www.802948.com-手机能看彩票中奖吗| www.507652.com-福彩63期开奖| www.173295.com-有没有正规快三平台| www.323417.com-七乐彩中奖查询工具| www.554194.com-七星彩语-| www.0372.me-姜丽花式快三| www.301824.com-海南七星彩现场直播| www.48hp.com-育休彩票-| www.115332.com-移动彩票官网| www.78313.com-福彩开奖信息出来| www.390025.com-彩经彩票大全| www.599582.com-买彩票怎么加倍| www.j29.me-贵州榕江县中彩票| www.9491.cn-体彩龙虎是什么意思| www.590368.com-18k彩金耳环耳扣| www.37119.cc-微信彩票竞猜维护| www.062837.com-淘彩票邀请码| www.181.pw-初二彩铅画动漫人物| www.831227.com-三月份足彩-| www.370676.com-送108元彩票| www.939155.com-599彩票安全吗| www.808655.com-手机上微信咋买彩票| www.456348.com-买高频彩有赚钱的吗| www.54790.com-体彩复式中奖计算器| www.857686.com-彩之源江苏快三首页| www.092186.cc-大连买彩票几点截止| www.170011.com-吉林体彩-| www.fe57.com-广东福彩十分钟开奖| www.029973.com-彩虹天堂有什么含义| www.848890.com-时时彩大宝典| www.919078.com-大地彩票是合法的吗| www.980135.com-竞彩让球比分直播| www.ru42.com-时时彩网投平台网址| www.4448.top-北京快三能赢钱吗| www.17414.com-中国竞彩网唯唯看球| www.265173.com-大发快三是赌博吗| www.028033.com-80彩票犯法吗| www.111427.com-战狼团队彩票计划| www.184955.com-彩神8下载网址| www.455709.com-买七星彩技巧与规律| www.339511.com-快三和值012路| www.899148.com-胜负彩数字代表| www.11966.com-31人合买彩票中奖| www.397451.com-一定牛彩票足球| www.605995.com-吉祥彩票发时时彩| www.602845.com-万彩网会不会被骗钱| www.704312.com-彩票天下233cc| www.626308.com-9号彩票是骗局吗| www.793733.com-中国中彩票最多的人| www.882287.com-高频彩种平台哪个好| www.952694.com-彩票内部中奖| www.rh88.cc-百宝彩票网河南| www.868756.com-七星彩杀号绝招| www.460123.cc-体彩杀码预测| www.td13.com-竞彩足球玩法| www.cai05.cc-快三玩法-| www.474881.com-九号彩票登录网址| www.388506.com-彩票群一直赚钱| www.770028.com-七彩山鸡蛋-| www.871509.com-六会彩即时开彩下载| www.669807.com-福彩店如何经营| www.987107.com-购彩堂下载安装| www.do20.com-彩票万能公式软件| www.589012.com-极速快三开奖号| www.791026.com-3d手机彩吧-| www.891698.com-彩票走势大全安卓| www.cx93.com-摇彩票-| www.1gj.cc-777彩票乐透软件| www.pc14.com-江苏快三图片| www.42er.com-彩票信息在哪里找| www.314706.com-多乐快3是啥彩票| www.463660.com-万豪彩票输了几万| www.065338.com-水溶彩铅画风景图片| www.79944.com-江苏快三独胆玩法| www.052935.com-竞彩500万彩票网| www.562127.com-彩506彩票-| www.ov60.com-3d彩票技术博客| www.17470.com-三分快三信用彩票| www.266496.com-买彩票中奖的前兆| www.5578.pw-d8彩票网-| www.760752.com-小鹿工具时时彩安卓| www.868346.com-7星彩票走势图| www.931969.com-手机699彩票下载| www.979803.com-二元彩票软件下载| www.cp0.com-分分快三计划免费版| www.ir27.com-彩票北京快了3| www.88664.com-彩九怎么下载不到| www.529191.com-新浪彩票双色球频道| www.619986.com-福彩快三多少种可能| www.781754.com-老杨说彩大乐透| www.878875.com-福彩3d百度大全| www.959745.com-大发时时彩计划数据| www.fy07.com-重庆时时彩qq群| www.7qm.com-公司收回彩票| www.852.net-时时彩5码公式| www.5650.biz-彩组词四字词语| www.775089.com-k彩大神有吗| www.858284.com-足彩大赢家手机版| www.919335.com-彩票店如何做私庄| www.987174.com-彩票五行新算法| www.cv23.com-网上凤凰私彩平台| www.rl20.com-新西兰快三走势图| www.329181.com-彩票送38元开户金| www.536536.com-彩票什么种类| www.633378.com-竞彩篮球2串1玩法| www.739482.com-天天中彩网站| www.114013.com-湖兆快三预测三同号| www.210011.com-安徽快三购买方法| www.60988.com-金柯福彩3d-| www.363320.com-满堂彩登录网址| www.065535.com-必赢网彩票输啦咋办| www.6032.org-五一彩票站放假吗| www.9qi.com-体彩有几种买法| www.88yk.com-如何建立私彩平台| www.110965.com-56cc彩票下载| www.478512.com-兑兑彩票app| www.650361.com-彩虹伞弯柄-| www.09ui.com-云彩店怎么下载| www.478.cc-体育彩票选号技巧| www.387990.com-华彩争霸app| www.129467.com-好运来彩票平台| www.213010.com-彩票平台哪个最正规| www.338684.com-118彩票怎么安装| www.439994.com-彩票门市转让| www.544187.com-怎么防止彩票连挂| www.627586.com-乐赢彩票苹果| www.740411.com-乐彩下载app下载| www.863062.com-新浪彩票预测| www.954476.com-彩经网排列三和尾走| www.k69.pw-七天网的彩票靠谱吗| www.479.tv-时时彩任三混合组选| www.761348.com-贵州福彩兑奖中心| www.17758.com-体育彩票源码| www.288553.com-高频彩票追长龙技巧| www.110842.com-彩票多久一次| www.233589.com-下载湖北快三走试图| www.352691.com-雅彩彩票真的吗| www.513400.com-排三彩宝独胆| www.247044.com-湖北快三随州论剑| www.603346.com-中彩网双色球规则| www.755186.com-大发时时采彩走势图| www.716538.com-购力七星彩奖表| www.91hb.com-首彩灰皮诺白葡萄酒| www.279736.com-重庆桥洞研究彩票| www.825277.com-如何成为竞彩猫专家| www.dy11.cc-下载亿彩网aap| www.5zr.cc-红中彩票娱乐平台| www.6880.biz-好彩门好彩门户网站| www.090966.com-南宁福彩大厦| www.753681.com-qq彩钻-| www.943585.com-久久发彩票资料站| www.940376.com-澳彩网-| 818合彩www.www.1555hc.com| www.536488.com-福彩三d魔图| www.660751.com-170彩票网图谜| www.776771.com-重庆时时彩几点停止| www.39236.cc-体彩排列3晚秋字谜| www.948947.com-彩票3d专家预测| www.033910.com-nba体彩哪里买| www.236964.com-一分快三开奖历史| www.389309.com-杨哥说彩-|