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.735273.com-二米彩票-| www.946793.com-彩钢瓦围挡成本| 大赢家彩票平台www.635893.com| www.107752.com-彩票能作弊吗| www.68156.cc-新彩吧图谜-| www.04az.com-水溶彩铅用什么纸| www.028364.com-博友彩票234| www.287333.com-博彩白菜-| www.420821.com-7乐彩开奖走势图| www.91030.com-羊城晚报晚晚好彩板| www.135561.com-体育彩票店招聘| www.217589.com-下载新快三街机游戏| www.237049.com-竞彩投注网站| www.284050.com-买彩票网名昵称大全| www.445635.com-开彩网程序-| www.484258.com-全中彩票软件| www.625468.com-七乐彩测号| www.982442.com-鸿彩网盈利模式| www.cy65.com-江苏快三精准计划| www.086698.com-快发彩票app官网| www.169995.com-河南快三开奖查询| www.275167.com-北单足彩app| www.351098.com-银河彩票app| www.431818.com-体彩500万税点| www.880073.com-福彩三d独胆预测| www.971707.com-菜彩票开奖查询| 乐彩网www.lcw997.com| www.82vz.com-数字三彩通-| www.221705.com-凤凰彩票破解器下载| www.e10.club-马来西亚福彩3d| www.502850.com-竞彩怎么设胆| www.22997.cc-王者彩票开奖| www.66619.cc-彩票梦想站-| www.cp7751.com-福利彩票开奖| www.677812.com-甘肃快三出号遗漏| www.0612.org-01彩票可靠吗| www.654153.com-微信群里玩北京快三| www.810628.com-澳客竞彩开奖网站| www.920102.com-江苏快三定毒胆| 500彩票www.50052k.com| www.422202.com-3d走势图乐米彩票| www.188767.com-福彩双色球预测| www.355320.com-彩乃奈奈电车痴汉| www.551375.com-足彩数剧爱彩网| www.201343.com-七星彩1到9的口诀| www.273168.com-体彩福利彩票| www.436643.com-福彩三地历史开奖号| www.585299.com-存一块送18元彩金| www.1346.net-深圳快乐彩改时间| www.885214.com-新利彩票能控制吗| www.6531.xyz-盈丰彩票官网| www.37274.com-彩票签到送彩金活动| www.080342.com-彩8彩票安卓官网| www.162287.com-吉林快三豹子| www.396298.com-福彩每年放假| www.007788.cc-今日体彩开奖结果| www.23324.com-福彩3d天齐网杀尾| www.992181.com-时时彩前中后三包胆| www.81xn.com-彩通网三地-| www.3957.me-莱利彩票官网| www.598782.com-黑彩3d玩法说明| www.716882.com-彩铅画橘子教程| www.849808.com-比特币分分彩结果| www.948342.com-福彩发行时间| 幸运彩票www.5095m.com| www.nr20.com-中国人人快三网安卓| www.75081.com-体彩种类及奖金种类| www.301649.com-彩经网预测-| www.539128.com-时时彩高奖金平台| www.55420.com-彩博888网址| www.922783.com-福利彩票站转让费| www.20kx.com-无锡彩旸香江怎么样| www.940522.com-一分钟开奖是黑彩吗| www.xy2.cc-福彩快乐十分玩法| www.1194.pw-彩票冷热趋势分析| www.018939.com-快三智能投注软件| www.507186.com-如何用百度扫彩票| www.020711.com-双色球老谢说彩| www.660968.com-福彩3d中奖经验| www.870057.cc-足彩分析师招聘| www.0452.net-彩网cai5登录| www.133455.com-彩钢板围栏报价| www.175931.com-软件黑客破解彩票| www.037898.com-财神彩-| www.134712.com-快三回血贴吧| www.6130.com-西安福利彩票七乐彩| www.323.hk-金巴黎彩票平台注册| www.35904.com-福彩双色球宣传语| www.000734.com-竞彩篮球有哪些比赛| www.380049.com-买私彩票犯法吗| www.517241.com-8亿彩票登录网站| www.268.cc-彩妆百货加盟| www.43892.com-66微彩app下载| www.870508.com-152彩票正规吗| www.604466.com-彩票01cp软件| www.894289.com-五省快三三颜走势图| www.688234.com-竞彩2串1高手微信| www.995886.com-彩店宝彩票官方网站| www.906057.com-58福彩-| www.608291.com-体彩湖南幸运赛车| www.81778.cc-彩票赌大小技巧| www.cp1777.com-幸运快三在线计划| www.619206.com-491彩票下载| www.683116.com-大圣彩票app下载| www.753159.com-3d万彩吧-| www.122361.com-有谁在玩优乐彩| www.051812.com-新加坡快三最新开奖| www.494779.com-彩票版区区开开| www.585033.com-体彩2o选5开奖| www.661262.com-购买霍德华彩票专著| www.023690.com-七乐彩在哪个台直播| www.ds42.com-苹果福彩下载安装| www.516871.com-二进制转换彩票| www.v11.cn-腾讯体育彩票在哪| www.509693.com-贵州彩票新闻中奖| www.616349.com-足彩4场234关| www.717170.com-彩铅画注意事项| www.6541.in-彩票顺龙技巧| www.654975.com-红辣椒七星彩软件| 500彩票www.904867.com| www.ab99.com-河北快三号码推荐| www.zv59.com-河北十一选五爱彩乐| www.827843.com-彩票跟单员挣钱吗| www.238061.com-发彩网下载到手机| www.94mz.com-最大的彩票中奖| www.189217.com-江苏福彩快三助手| www.35709.com-87彩票网实体店| www.236381.com-u9彩票合法吗| www.kj76.cc-易彩票软件-| www.369102.com-体彩排三两码遗漏| www.911489.com-彩票十一选五内蒙| www.7894.org-中国彩票哪种最靠谱| www.58603.com-彩票助赢下载| www.081032.com-吉林市怎么申请体彩| www.369054.com-港彩直播开奖现场| www.516532.com-彩民李预测文章| www.673568.com-古建筑彩画图片大全| www.796284.com-天天彩票助手充值| www.at39.com-湖北福彩网精彩十分| www.160082.com-体彩篮球竞猜网| www.66162.cc-体彩模拟-| www.78am.com-足彩违法-| www.003763.com-雪园足彩比分| www.169736.com-快三吉林省走势图| www.284433.com-福彩体彩哪些彩种| www.12985.cc-快三开奖记录360| www.67832.cc-公务员彩票中奖| www.362848.com-彩虹歌曲羽泉穿刺| www.669804.com-中国彩票分类| www.3378.cm-鼎丰彩票网址| www.813046.com-黑龙江省体彩地址| www.571001.com-如何查彩票中奖号码| www.024378.com-500彩集团-| www.246288.com-快三平台首页| www.308792.com-68彩票平台官网| www.365396.cc-福彩3d四码遗漏| www.550450.com-彩发彩票-| www.83so.com-网赌时时彩的危害| www.100136.com-8炫彩是什么彩票| www.8sd.cc-大发时时彩计算方法| www.144905.com-竞彩蓝球专家推荐号| www.723569.com-天宁系列图3d福彩| www.838053.com-彩六平台靠谱么| www.947891.com-网上正规购彩平台|