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.787279.com-江苏快三真假| 国彩网www.guocai667.com| www.892088.com-竞彩二串一比分大奖| 55世纪www.202115.com| www.mg58.com-好彩网app-| www.20wo.com-贴吧彩票吧-| www.0105.vip-手机8888彩票网| www.540404.com-彩乐园ii应用下载| www.680072.com-彩拾彩票能提现吗| www.791481.com-时时彩网页-| www.896167.com-氵江苏福彩快3| www.993596.com-足彩怎么兑奖规则| www.hm08.com-大发快三赢钱的方法| www.16qe.com-36选7好彩3公式| www.7251.biz-彩虹符号可复制| www.2664.com-好的手机彩票app| www.11450.com-彩票生日选号软件| www.91776.cc-彩票系统出售| www.069256.com-百万彩票是骗局吗| www.303225.com-彩虹六号手机版| www.869726.com-彩票黑平台冻结账户| www.995233.com-足球彩票百度百科| www.381721.com-福彩34期开奖号码| www.31833.cc-最近的彩票快3开奖| www.px16.com-网上彩票送体验金| www.802127.com-中国体肓彩票大乐透| www.988536.com-万豪彩票牛牛总是输| www.18uq.com-泰安体育彩票| 500彩票www.540877.com| www.84vu.com-大发0234彩票| www.946880.com-体育彩票高频彩种| www.731056.com-8k易彩登录大厅| www.862126.com-手机版幸运彩| www.954335.com-中国彩票走势图| www.xq7.com-3d彩吧图库-| www.4si.cc-彩赢家福利彩票| www.85vh.com-彩66平台-| www.4956.cn-奥利国际彩票官网| www.24036.cc-z中彩娱乐-| www.92721.cc-3d彩票交流-| www.855892.com-定位胆是正规彩票吗| www.932585.com-网赌时时彩有作假吗| 易彩网www.12455k.com| www.hz25.com-福彩排列五中奖规则| www.b25.net-江西快三开奖时间| www.533802.com-七星彩2位数多少钱| www.701520.com-竞彩网预测-| www.845775.com-37彩票下载-| www.qu13.com-香港时时彩存在吗| www.1628.vip-微购彩app-| www.274715.com-大发时时彩开奖号码| www.vh71.com-正规赚钱彩票平台| www.5412.top-澳客网大发快三漏洞| www.631835.com-七彩虹1660ti| www.771847.com-体彩店怎么赚钱| www.467008.com-七乐彩双龙会| www.316269.cc-怎样开竞彩店| www.425886.com-天下彩票会员料| www.597913.com-附近的福彩投注站| www.6363.in-易顺百顺能卖彩票| www.27382.com-01彩票破解版| www.129464.com-众彩平台app下载| 福利彩票www.99677j.com| www.020913.com-福彩1d打法-| www.cai798.com-什么叫快三-| www.440043.com-七星彩守号15年| www.635483.com-博彩游戏平台网站| www.ki60.com-海南体彩下载| www.7367.loan-上海最近中奖彩票| www.484802.cc-彩票30选7预测| www.75tp.com-写彩票分析赚钱| www.806038.com-球酷彩票-| www.910207.com-利民彩票真能赚钱吗| www.68yx.cc-乐彩娱乐国际是什么| www.966569.com-五分彩助手-| www.5698.space-福利彩票站经营| www.078883.com-今天体彩出奖结果| www.451178.com-杏耀彩票app| www.456721.com-时时彩计划抢眼团队| www.455691.com-彩票类小说-| www.602588.com-求信誉好的彩票平台| www.826384.com-鸿运彩票体现不了| www.922360.com-全国各地彩礼价格表| www.980802.com-附近福利彩票站多远| www.aw76.com-快三彩票是骗人的吗| www.85202.com-济南福彩体彩站转让| www.309091.com-微信上的彩票导师| www.421355.com-联通话费怎样买彩票| www.542955.com-黄金分割法彩票| www.7835.top-块3福彩app-| www.376001.com-宣城体彩中心主任| www.345723.com-我想当彩神ii代理| www.63ev.com-做彩票任务平台| www.921.me-耽美为什么叫彩虹| www.4453.cc-必发彩票网址app| www.4145.xyz-彩虹六号墨冰值钱吗| www.886396.com-好运来彩票怎么注册| www.960449.com-好彩票注册送38元| 幸运彩票网www.33598z.com| www.3989.in-河北福彩双色球中奖| www.201224.com-盛大彩票平台可靠吗| www.321446.com-官方高频彩开奖直播| www.28531.cc-凤凰彩票元角模式| www.051751.com-万豪彩票可靠吗| www.129248.com-搜索快乐彩浙江| www.533319.com-数学家中奖彩票| www.29ij.com-体彩投注平台| www.5400.cc-我要查看体育彩票| www.357657.com-员工领奖中彩票中奖| www.846073.com-江苏快三会赢吗| www.939513.com-彩吧彩票注册| www.987610.com-彩票万能倍投器| www.bf89.com-网上快开彩票骗局| www.f82.club-福利彩票三d藏机图| www.687146.com-手机刮彩票-| www.779305.com-彩易网app-| www.858360.com-bb3d彩票走势图| www.233481.com-北京福彩中心在哪里| www.491908.com-彩之网双色球开奖| www.827977.com-彩票app怎么举报| www.596121.com-彩票算法规律| www.715812.com-306cc彩票网| www.316.in-开彩票店有什么风险| www.641948.com-体彩柜台最新| www.43nf.com-福彩丹东综合报| www.520729.com-爱乐透彩票走势图表| www.606209.com-福彩3d今天买什么| www.95lr.com-风彩印刷厂怎么样| www.29267.cc-鸿彩平台有问题吗| www.682184.com-微信彩友团出票| www.607811.com-中国福彩种类| www.535452.com-彩票十二生肖图| www.58ua.com-澳彩大讲堂系列| www.114230.com-3d彩宝贝杀号定胆| www.350234.com-九万彩票网站| www.416251.com-彩虹三无人机价格| www.508279.com-玖富彩票六肖十二码| www.320813.com-七星彩冷热码统计图| www.17321.cc-本周六足彩对阵表| www.qw34.com-老重时时彩走势图| www.460274.com-可信的彩票代购网站| www.388681.com-重庆时时彩稳赚公式| www.45ms.com-怎么下载彩16| www.523.mobi-崂山区体彩办| www.116688.com-福彩3d中奖票面| www.707623.com-一分钟一期快三平台| www.825828.com-彩神vlllapp| www.901601.com-手机黑彩快三| www.969147.com-天天彩票网靠谱吗| www.qa5.com-网上买彩票的网站| www.315278.com-河南福彩网快3| www.454806.com-主流博彩公司| www.552013.com-彩票网址大全app| www.099522.com-百盈快三开奖号码| www.146200.com-nba竟彩-| www.203422.com-彩神8app网站| www.dg94.com-讧苏福彩快三开奖号| www.29972.com-美女时时彩骗局| www.009876.cc-華彩-| www.31tk.com-福彩特别消息| www.0225.biz-快乐时时彩骗局| www.335854.com-彩迷天地双色球字谜| www.858171.com-蓝精灵彩吧图库a| www.78230.com-体彩开奖19033|