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.661504.com-今天的三d彩报| www.em70.com-长春快三微信群谁有| www.81845.com-众彩网手机版怎么样| www.044486.com-手动进入新星彩| www.05381.com-彩票押50万-| www.220472.com-超高反水彩票平台| www.88985.cc-西安福利彩票店转让| www.00118.com-海口彩钢板围挡价格| www.75028.com-彩票招财-| www.900588.cc-中福彩官网首页| 大赢家彩票平台www.289917.com| www.52xs.com-高频彩缩水器| www.01997.com-网彩危害-| www.51072.com-福利彩三试机片| www.925266.com-福彩天齐网-| www.126207.com-菜彩票开奖查询| www.0479.date-网上购彩是真的吗| www.6030.net-昆明福彩中心在哪里| www.381943.com-更多精彩作品| www.287308.com-安徽福彩快三奖金| www.as19.com-贵阳福彩官方| www.3339.online体育彩票高频走势图| www.77jn.com-彩票关注码-| www.9734.me-体彩刮刮乐兑奖流程| www.70227.com-精彩头条-| www.017937.com-乐赢彩票app| www.108568.com-七星彩中了三个数字| www.74164.com-福彩双色球号码范围| www.cp428.com-江西快三最新开奖| www.na08.com-快三app下载苹果| www.0616.vip-七星彩奖表app| www.g73.com-排列三彩宝网试机号| www.275972.com-快三路线北京末班车| www.236722.com-105彩票官方网站| www.342799.com-今天体彩七星彩开奖| www.102686.com-仲博彩票官网下载| www.078034.com-中福彩票黑平台| www.22291.cc-山东福彩官方下载| www.42vn.com-任九对阵表新浪爱彩| www.813337.com-微信群里玩彩票| www.hc24.com-手机彩票下载安装| www.x87.club-棋牌加彩票无限代| www.99xx.com-网上能买时时彩吗| www.48gw.com-体彩柜台-| www.106991.com-彩票站网上接单| www.291596.com-好的彩票信誉平台| www.207117.com-首页一新彩票走势图| www.300744.com-申请28元免费彩金| www.388466.com-3d遗漏分析中彩网| www.g21.cc-福彩3d开奖原理| www.503539.com-计算器竞彩足| www.95273.com-足球彩票推荐预测| www.129611.com-3d众彩网专家推荐| www.59nn.com-百宝彩视体验帐号| www.2848.cm-七星彩中奖地区| www.507654.com-三的胆码预测家彩网| www.698553.com-台州体彩网-| www.153422.com-七乐彩拖胆投注表| www.129533.com-下载中奖彩票被调| www.951703.com-博众取彩的意思| www.72697.com-吉林福利彩票投注站| www.363866.com-江苏快三二不同预测| www.981355.com-苹果7钢化膜彩膜| www.av4.cc-手机快三输钱是骗局| www.228408.com-彩礼超过贩卖人口| www.336972.com-体彩世界杯彩票| www.035708.com-中国彩票哪个靠谱| www.728926.com-好彩票有幸运28| www.540420.com-高频彩怎么玩都是输| www.xp19.com-利盈彩票app下载| www.1463.pw-彩铅画乡村风景| www.9887.top-乐发彩票主页| www.218770.com-go彩下载-| www.281468.com-时时彩三星做号思路| www.345270.com-大发彩平台-| www.448486.com-麒麟彩币骗局| www.254937.com-十大彩票平台排行| www.335539.com-广西快三游戏规则| www.735393.com-37彩票登录-| www.331336.com-彩81彩票苹果下载| www.629718.com-足彩14場比分直播| www.730298.com-买时时彩能赚钱吗| www.819228.com-三分赛车彩票技巧| www.889099.com-乐彩网app安卓| www.954441.com-牛蛙彩票四不像图| 500彩票www.50080h.com| www.144087.com-彩之家论坛资料| www.270549.com-788彩票app| www.356342.com-高频彩电脑随机数| www.667867.com-彩票用手换球事件| 亚洲彩www.68568b.com| www.42eo.com-体彩排列三下载| www.979179.com-好彩蓝莓假烟| www.7592.cn-体彩兑奖是拿现金吗| www.42877.com-南山区中彩票了| www.287432.com-五分快三送彩金| www.380002.com-新浪购彩平台登录| www.516529.com-快三长龙是什么意思| www.580696.com-今日体彩排三开奖号| www.tb3.com-彩长期盈利心得| www.627965.com-爱购彩官网下载| www.867108.com-金钱豹彩票游戏| www.gs7.com-安徽快三计划网| www.0018.me-彩票选几个数字| www.216050.com-体彩7星彩兑奖规则| www.44iu.com-彩93彩票ios| www.80110.cc-福彩8用户注册| www.170151.com-天津快三开奖号码| www.770388.com-好彩888-| www.869633.com-香港六禾彩-| www.940028.com-天津市时时彩官网| www.31ly.com-如果中了彩票怎么办| www.1242.vip-七星彩每次中奖金额| www.29663.cc-3d彩民乐钱树图库| www.86098.cc-彩钢板厚度怎么确定| www.637799.com-彩票种类有哪些种类| www.705705.com-发彩网fc8828| www.774756.com-七乐彩奖励规则| www.33615.com-网络时时彩诈骗案| www.645153.com-冬日彩蛋法贝热| www.q42.net-广西福彩快三手机| www.99km.com-丹东彩吧丹东综合报| www.5968.biz-重庆结婚不要彩礼钱| www.44688.cc-中彩网信誉-| www.224036.com-广东福彩快乐10分| www.rx82.com-手机版分分彩软件| www.31qn.com-什么彩票星期六开奖| www.255267.com-今晚七乐彩预测号码| www.137619.com-福彩和体彩哪个靠谱| www.327502.com-168彩票开奖大全| www.421349.com-东方亮彩车间图片| www.507720.com-国丰彩票软件下载| www.15330.com-k彩是骗局揭秘| www.73341.com-海南七彩票-| www.352644.com-台湾福星彩开奖直墦| www.422826.com-吋时彩今天开奖结果| www.535688.com-买彩票秘籍-| www.598120.com-竞彩自由过关玩法| www.664519.com-儿童彩铅画简单图片| www.746695.com-酷彩吧正规吗| www.827011.com-时时彩抓了判刑| www.890333.com-合肥福利彩票中心| www.982044.com-排列五彩票对比器| www.dl90.com-网上玩快三犯法吗| www.1pc.com-彩色激光打印机喷墨| www.149119.com-极速时时彩计划全天| www.272307.com-北京快三预测出来了| www.62378.com-七星彩票走势图| www.972215.com-天玺彩票-| www.08qw.com-爱购彩票靠什么盈利| www.cx6.com-彩票店宗旨-| www.wx22.com-旺彩预测社区| www.8740.top-大发时时彩随机码| www.0044.me-体彩是多少数字| www.26992.cc-新彩票易彩快3| www.433581.com-狗万足彩app下载| www.535193.com-体彩中一等奖去哪领| www.610306.com-福彩3d破解软件| www.095053.com-福彩3d购买预测| www.050577.com-四川省福彩中心地址| www.090578.com-体彩排列5走势图表| www.33283.com-私人彩-| www.03070.com-网络彩票害死人| www.57672.cc-易盈彩票093|