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.233755.com-福彩3d大小走势图| www.913185.com-彩客网五分快三| www.985509.com-彩票2元网首页官网| www.sd4.cc-快三复式计算四个号| www.tf46.com-和值彩票规律| www.602305.com-免费彩票平台送38| www.693867.com-三宝生活体彩屋代理| www.777646.com-网购彩票网站| www.869092.com-彩票代理违法么| www.954834.com-瑞彩祥云苹果版网| www.cp340.com-快三登录平台官网| www.500950.com-1寸彩色近照| www.582637.com-重庆时时彩官方网址| www.352621.com-澳门福星彩开奖记录| www.29856.com-北京福彩快乐十分| www.625566.com-七乐彩摇奖直播| www.8886.cn-竞彩8串1错一场| www.199185.com-彩票本钱少很难赢的| www.949137.com-中国福利彩票传统彩| www.3900.top-六爻预测彩票| www.783297.com-福彩彩票双色球图标| www.885467.com-内蒙古快三和尾和值| www.cp1800.com-福彩快3下载安装| www.869927.com-下载约彩365| www.751159.com-彩巴士-| www.859757.com-456彩票-| www.940521.com-下载3d彩票软件| 好乐多www.www.c760c.com| www.mp45.com-彩78app-| www.986967.com-内蒙快三均值走势图| www.ff83.com-哪个彩票软件可以买| www.988001.com-彩民乐探码图双色球| www.488578.com-福彩自助终端下载| www.7879.top-御都彩票登陆| www.29692.com-易彩集体app下载| www.278442.com-红牛彩票网站真假| www.7458.pw-申请体彩店去哪申请| www.871920.com-新彩网首页-| www.985103.com-体彩真还是福利彩真| www.am61.cc-七星彩走势图彩经网| www.e37.net-乐彩报码-| www.99bt.com-彩虹六号黑卡店铺| www.93qe.com-英国5分彩开奖软件| www.5258.tv-中国彩票计划网| www.750772.com-网上说破解彩票平台| www.891390.com-福彩刮刮乐广告语| www.85648.com-彩票坑穷人-| www.fb6.com-一分彩破解-| www.866640.com-福利彩什么时候开奖| www.948798.com-体育彩票有哪些| 澳客彩票www.106ak.com| www.859567.com-泉州体彩聊天室| www.939378.com-足彩竞彩单场竞猜| www.996198.com-足彩十四场即时比分| www.ck48.com-合肥福彩-| www.xa58.com-山西快三开奖走势图| www.13kr.com-中国七星彩开奖号码| www.88jr.com-临夏福利彩票转让| www.312758.com-江苏快三杀号| www.6872.xyz-彩票怎样看中奖| www.178799.com-6+1体彩-| www.qh09.com-亚太好彩爆珠| www.04687.com-公益彩票网-| www.03xh.com-玩快三跳楼-| www.81bu.com-乐彩论坛排317| www.187576.com-重庆时时彩助手| www.5567.online二元彩票开奖结果| www.15528.cc-浙体彩网-| www.829900.com-大师双色球qq彩票| www.872593.com-福利彩票时时彩结果| www.961466.com-500万的彩票种类| www.cp0.com-分分快三计划免费版| www.001565.com-快三每注奖金多少钱| www.296328.com-通化快三开奖结果| www.365345.com-彩库图吧-| www.466440.com-美国45秒彩平台| www.559846.com-彩票收藏展-| www.570227.com-3d彩票机选-| www.652661.com-彩贝壳app怎么样| www.731274.com-福客来彩票app| www.816894.com-昨天体彩中奖号码| www.058959.com-新浪体育彩票网| www.335976.com-一号彩票-| www.648608.com-香港快三下载| www.596068.com-赊账买彩票中奖| www.248844.com-福彩28下载-| www.653702.com-百乐彩手机版安卓| www.284922.com-福彩3d777助手| www.431181.com-彩票都是什么时候开| www.592129.com-炫彩粒子怎么弄字| www.850582.com-重庆时时彩是坑吗| www.998452.com-重庆彩票官网开奖| www.tx77.com-爱彩乐软件-| www.519048.com-腾讯彩票是腾讯的吗| www.685093.com-赌彩网-| www.578430.com-博亚彩票app| www.53yh.com-彩票很中-| www.7430.cn-买彩票算不算做慈善| www.91500.com-0707彩票ap-| www.259106.com-竞彩官网下载| www.931123.com-彩八正版下载安装| www.553553.cc-比赛中断竞彩怎么算| www.144175.com-竞彩单关都博平局| www.861219.com-福彩直播在线观看| www.081863.com-怎么玩七星彩三字定| www.225506.com-新快三单机游戏| www.261776.com-福利彩票一体机| www.381326.com-今晚七乐彩开奖预测| www.850508.com-世界杯竞彩投注| www.964283.com-足彩最快开奖结果| www.zc27.com-福彩体彩3a试机号| www.343402.com-九万彩票平台怎么样| www.233420.com-体彩快中彩查询| www.75bs.com-时时彩正规倍数| www.5517.cm-世界顶级彩票| www.376028.com-网络购彩有望恢复| www.576203.com-成都福彩中心| www.934761.com-手机快彩-| www.680047.com-什么是彩妆化妆品| www.67483.com-彩票和值-| www.351300.com-彩神平刷破解版| www.290739.com-广西快三和值怎么玩| 彩票大家乐www.21202b.com| www.536541.com-哪个彩票最好中奖| www.97667.com-重庆时时彩新公告| www.089138.com-彩票网站代理怎么做| www.310342.com-吉林福彩举报电话| www.770641.com-网上彩票怎么盈利| www.4035.biz-彩票名家双色球分析| www.468060.com-福彩3d彩票图大全| www.579276.com-广西快三出号规律| www.655931.com-体彩排列三遗漏无码| www.750082.com-七星彩4个号多少钱| www.87le.com-红彩会网址是多少| www.16989.cc-7星彩杀号-| www.297075.com-快乐彩开奖图| www.339874.com-山西省福彩-| www.330230.com-采摘网牛彩网| www.033659.com-乐和彩彩票新手测评| www.377366.com-917彩票软件| www.522113.com-拼搏在线彩票网官网| www.587478.com-快乐彩票下载软件| www.644670.com-九速彩-| www.718536.com-彩虹歌词曲-| www.777958.com-978彩票站-| www.831708.com-推店彩票是骗人的嘛| www.883613.com-高频彩票有哪些种类| www.938727.com-亿彩网官网下载| www.977481.com-北京加盟彩妆店| www.ck34.com-彩报中心彩吧图库| www.si40.com-彩票代玩长期兼职| www.0zs.cc-红彩网络直播吃饭| www.44vb.com-互联网彩票区块链| www.gf84.com-最快的彩票开奖源| www.968905.com-不要买彩金-| 500彩票www.375477.com| www.02zi.com-快乐双彩开奖结果查| www.cl6.cc-快三三军是什么意思| www.ug16.com-乐彩33可靠吗| www.490072.com-福利彩票经验技巧| www.392072.com-体彩投注软件山东| www.212067.com-优信彩票大发快一| www.52150.com-伯爵彩票网址| www.353252.com-八八彩票官网|