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天

知道了
百盈PK10 www.855786.com-彩票如何定胆| www.58077.com-最新版彩乐园| www.3kg.cc-彩票姓名选号| www.421221.com-竞彩计划金手指| www.675228.com-高频竞彩-| www.918036.com-送彩金网大全| www.03397.com-时时彩倍投计划| www.yj56.com-彩38线路导航| www.191563.com-河南快三跑马一定牛| www.nb28.com-彩票店坐庄-| www.605718.com-吉祥彩票手机网址| www.550244.com-优彩股份-| www.933703.com-七乐彩13-| www.382990.com-无锡彩旸香江价格| www.770991.com-一分彩彩票软件| www.75wh.com-新浪足彩电脑版| www.29228.com-广东没有网售彩票的| www.129292.com-安徽快三号码统计器| www.290771.com-内蒙古快三一二位| www.zo01.com-好彩3缩水技巧| www.18872.cc-998彩票网站大全| www.006191.com-上海福彩快3推荐| www.126084.com-彩票app88-| www.262793.com-重庆时彩是骗人的吗| www.402605.com-3d彩吧杀号-| www.234175.com-安徽省福彩领奖流程| www.85051.com-七星彩振幅走势图| www.cai5844.com吉林体彩-| www.788537.com-竞彩咨询-| www.c27.me-易彩幸运时时彩| www.65998.com-甘肃快三走势图明天| www.131276.com-福彩中彩网站| www.331037.com-带彩票的棋牌| www.520133.com-快三号码选择| www.989929.com-大花猫彩报2018| www.985204.com-玩彩越输越多| www.9602.vip-带有彩字霸气网名| www.075509.com-可以买彩票的软件| www.323032.com-凤凰网彩票开奖查询| www.839266.com-福彩开奖直播新浪网| www.739844.com-132彩票网-| www.728782.com-大连体彩大乐透| www.tm47.com-福彩加盟电话| www.938.la-三国杀张星彩皮肤| www.07535.com-500万彩票计划| www.097352.com-体彩福利开奖结果| www.650211.com-排3杀号定胆彩宝贝| www.736532.com-油性彩铅画风景| www.876828.com-体彩什么时候开始卖| www.977571.com-中国体育彩票世界杯| www.eb05.com-广西好运彩开奖| www.20ac.com-创银彩票合不合法的| www.609038.com-万彩彩票怎么样| www.69fb.com-4scc彩票最齐全| www.115649.com-大发彩票开奖| www.cz55.com-幸运快三预测| www.1564.cc-收藏彩票-| www.3022.xyz-体彩排列三杀号汇总| www.364567.com-广西快三计划网页| www.02181.com-玩彩票妻离子散| www.723519.com-常州彩票中大奖| www.820621.com-雷州七星彩梦册大全| www.505145.com-博有彩下载-| www.660278.com-新浪小炮彩票| www.796058.com-优盈彩票注册| www.005697.com-360+彩票-| www.187316.com-黑桃k时时彩可靠吗| www.456740.com-彩票3d图谜总汇| www.253219.com-腾讯时时彩全天计划| www.439900.cc-时时彩账号-| www.07506.com-500彩票网app| www.009737.com-人人红彩票老版本| www.121688.com-体彩6十1中奖查询| www.157264.com-易彩网是不是诈骗| www.04031.cc-苹果app购彩| www.987073.com-快三中奖号码走势图| www.fy75.com-快三预测软件破解版| www.yz12.com-吉林形态快三| www.26ob.com-谷歌分分彩-| www.881964.com-湖北快三遗漏统计值| www.552208.com-上海怏3爰彩乐| www.775384.com-吉林快三亚好号| 188彩票www.188721.com| www.121090.com-福彩双色球选号技巧| www.801809.com-3d杀码论坛乐彩| www.199159.com-广西快三投注网站| www.399885.com-彩票快乐十分怎么买| www.022.cm-时时彩后一计算公式| www.5849.org-彩99官网下载安装| www.28759.cc-台湾福星彩资料| www.77511.com-球探彩客彩票登录| www.034926.com-全民彩票网app| www.70ux.com-蛋蛋彩画-| www.0738.net-彩票对打套利的问题| www.9927.cn-体彩网开奖视频直播| www.q79.net-广东体彩网点| www.182647.com-彩票快三-| www.910908.com-美女托彩票骗局| www.93166.cc-成都彩钢围挡租赁| www.34296.com-人物彩铅画图片| www.019643.com-天天快三开奖| www.089078.com-福彩和值走势| www.189863.com-快三开奖结果一定| www.277752.com-中彩论坛网-| www.118494.com-柬埔寨做博彩两年| www.273011.com-体彩发行宗旨| 亿彩堂www.87668p.com| www.13693.cc-连续中彩票的人| www.81196.cc-吉林快三破解器| www.t64.com-威彩宝软件下载| www.754833.com-北斗福彩今日预测| www.9685.com-彩店宝能不能用| www.139239.com-好彩app安全吗| www.415465.com-安徽快三总共多少期| www.203381.com-中国福彩5d-| www.916322.com-送38彩金时时彩| www.is2.com-福彩内蒙古快三下载| www.4by.com-体彩史上最大奖| www.42073.com-安装彩钢瓦-| www.971148.com-∩家彩开奖-| www.0601.top-淫三国梦想星彩无惨| www.715730.com-彩票源码系统妙招| www.899029.com-湖北快三难度| 大赢家彩票平台www.927320.com| www.xj11.cc-鑫彩快3网是真的吗| www.7358.shop-上海体彩站点电话| www.55320.com-时时彩做号技巧| www.9038.top-nba彩票哪里买| www.580357.com-彩票弃奖有多少次| www.634189.com-明博彩票骗局| www.112505.com-众购彩票苹果版本| www.qv85.com-湖北福利彩票快三| www.715891.com-306cc彩票下载| www.tp94.com-百姓彩票9.99| 88彩票www.8839m.com| www.374898.com-天天爱彩票网站首页| www.796244.com-买彩票选号的规则| www.4jr.com-中国彩票东北最大奖| www.9540.biz-四星彩票-| www.209097.com-福彩排5-| www.410053.com-体彩排三开机号是| www.656533.com-彩之家预测-| www.768200.com-彩票聚合资讯门户| www.889073.com-彩站宝店主使用教程| www.965394.com-大发快三输钱| www.cai2533.com安徽省快三-| www.lp21.com-创富彩票合法吗| www.69xj.com-彩票输钱海滨| www.905556.com-快三到底怎么买| www.cp7959.com-彩45app-| www.357236.com-彩票近期中大奖人| www.587183.cc-国际彩票是骗局嘛吗| www.639001.com-腾讯彩-| www.96mk.com-梦想彩票站计划网| www.qa61.com-安徽省福彩发行中心| www.864888.com-华彩在线下载| www.64hd.com-竞彩中什么叫交叉盘| www.4853.xyz-彩票818充钱| www.9499.online彩票不赔的买法| www.56394.com-河北体彩管理中心| www.89097.com-澳门博彩足球赔率| www.269294.com-彩票真实案例| www.880192.com-福彩家彩网专家杀码| www.388971.com-趣彩彩票注册|