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.137503.com-贵州省福彩怎么关注| www.081892.com-七星彩中三个有钱吗| www.bn12.com-彩票平台拉人骗局| www.00gb.com-什么快三提前开奖| www.0322.cm-彩票倍投循环模式图| www.668050.com-港彩神算高手坛| www.792323.com-福彩中心是干嘛的| www.975911.com-洛阳彩礼一般多少钱| www.fd01.com-快三彩票加盟条件| www.d11.cc-彩票开奖七星彩今天| www.331350.com-足彩漏洞-| www.40es.com-七星彩一注机选号码| www.140015.com-彩票368-| www.wn29.com-快三012路秘籍| www.528144.com-研究彩票的规律| www.82dn.com-竞彩足球历史最大奖| www.639666.cc-乌鲁木齐竞彩店| www.173079.com-甘肃快三一定牛推荐| www.539894.com-看双色球彩吧网| www.632485.com-彩票任选玩法| www.714105.com-gc国彩是骗局揭秘| www.807480.com-福彩双色球守号技巧| www.880130.com-福彩3d杀码图| www.948837.com-好运快三怎么玩| www.997829.com-福彩3d进位和差| www.bf90.com-黑彩平台注册| www.713122.com-网易彩骗-| www.523275.com-投彩网站-| www.633780.com-香港大福证券彩票部| www.732181.cc-彩票登录平台| www.819617.com-对买彩票的看法| www.906233.com-快三输的家破人亡| www.979227.com-旋子彩画图片| www.jp5.com-彩票河南-| www.42576.com-网络彩票停售| www.171190.com-安徽体彩网十一选五| www.343134.com-京东能卖彩票么| www.451178.com-杏耀彩票app| www.58nq.com-网彩揭秘-| www.0627.net-3d彩易-| www.97723.com-香港时时彩开奖历史| www.088983.com-彩票4+1多少钱| www.220278.com-福彩双色球走势图表| www.365293.cc-昨天吉林快三走势| www.521908.com-彩票出大奖投注站有| www.720195.com-福彩查询开奖号| www.850175.com-足彩串关单场| www.953196.com-极速快车彩票| www.zy8.com-福建福彩网快3| www.g34.com-今晚七彩开奖| www.128782.com-广西福彩有几种玩法| www.699273.com-天天彩选3开奖号码| www.838356.com-玩快三怎么赚钱| www.974567.com-众彩娱乐平台登录| www.834766.com-新加坡好彩双爆| www.1919.cm-时时彩最稳赚钱技巧| www.629983.com-76c会员彩票| www.738231.com-体彩定律-| www.811727.com-七乐彩四拖六多少钱| www.880740.com-淘宝有彩票吗| www.948779.com-福彩3的d走势图| 网易彩票www.081wy.com| www.hg78.cc-中彩手彩票-| www.017057.com-一分钟一开奖的彩票| www.863758.com-彩票开奖千-| www.tg65.com-安徽福利彩票双色球| 幸运彩票www.669548.com| www.526390.com-彩票坐庄是什么意思| www.4365.net-哪里可以买正规彩票| www.od76.com-体彩网足球比分直播| www.532185.com-买彩票的小技巧| www.176205.com-幸运快三网-| www.11860.com-大乐透体彩开奖规则| www.114613.com-福彩3d最好软件| www.620951.com-天空彩票高手网| www.768203.com-安徽快三助赢手机版| www.72cw.com-500万分分彩彩票| www.2448.com-2分彩开奖记录| www.727738.com-福彩中奖查询app| www.810827.com-福彩3d真实的谎言| www.908550.com-七星彩开什么| www.984417.com-福利彩票快3代玩| www.hk27.com-湖北快三是国家的吗| www.p01.xyz-玩彩网彩票官方网站| www.181772.com-内蒙快三遗漏号| www.cai217.com-快三彩票投注技巧| www.iy93.com-体育足球竞彩网| www.zc31.cc-福彩体彩图谜字谜| www.7169.biz-e信彩票-| www.71ei.com-3d独福彩预测| www.6552.shop-盈丰彩票正规不| www.50373.com-彩票网站制作有哪些| www.0383.org-最大的彩票网站| www.695721.com-竞彩8场4关-| www.347822.com-七乐彩票充值正规吗| www.466219.com-彩票头条app下载| www.566231.com-快三推算下期开奖号| www.658234.com-彩电视-| www.735382.com-七乐彩一等奖| www.817891.com-足彩第19025期| www.891707.com-双色球彩票软件| www.952991.com-湖南体彩官网| 凤凰彩票www.88266y.com| www.805099.com-七乐彩中奖条件| www.897208.com-彩票最长的龙有多长| www.976377.com-彩票开奖直播app| www.cp2985.com-时时彩报警后果| www.oy06.com-彩金彩票骗局| www.006423.com-60万一包的好彩| www.695783.com-竞彩m串n-| www.785378.com-江西快三助手下载| www.871422.com-苏州彩票巨奖| www.sa68.com-快三跨度计算| www.x20.cn-辽宁沈阳福彩中心| www.qe7.com-万彩吧彩票高手计划| www.uq54.com-8828彩票平台| www.42yv.com-体彩走势图样本| www.377006.com-玩彩网骗人吗| www.87kk.cc-福满天体彩店软件| www.099768.com-快彩推号专家| www.201433.com-快彩11选5助手| www.345910.com-山东福彩开奖| www.611993.com-黄岛彩票店转让信息| www.081919.com-在线彩票计算器| www.719357.com-彩吧vipapp-| www.128282.com-快三怎样选和值大小| www.732543.com-乐游彩票app| www.92297.cc-彩色沥青价格别| www.566026.com-足彩升盘升水| www.621589.com-快三分分彩规律| www.688186.com-河南福利彩票公众号| www.764629.com-易中快三安卓版| www.901565.com-体彩5综合版| www.954660.com-下载彩票77-| C9999www.318548.com| www.zg4.cc-江苏快三不同推荐| www.g96.cc-旧特彩吧app| www.41tt.com-中国体育彩票扑克牌| www.47zs.com-荣誉彩票平台怎么样| www.5503.com-彩虹岛外挂-| www.372599.com-幸运五星彩开奖网址| www.357606.com-顶呱刮彩票技巧| www.461896.com-福彩开奖排五玩法| www.556389.com-彩乐汇的规律| www.212882.com-搭建私彩票网站| www.306244.com-澳发彩票手机版| www.366307.com-天中图库彩搜网| www.485558.com-支付宝买彩票合法吗| www.51555.com-福彩三d藏机图字谜| www.003788.com-全民彩票暂停销售| www.gi91.com-快三秒饮品连锁| www.c71.cn-体育彩什么时候开奖| www.079579.com-竞彩篮球玩法规则| www.39526.cc-北京体彩网app| www.537615.com-彩色造句子-| www.618471.com-开体彩店标准| www.558218.com-苹果彩票官网| www.618317.com-熊猫彩票官方| www.675869.com-好彩网论坛3d| www.758918.com-彩票刷水骗局| www.828480.com-彩票代购合法吗| www.889538.com-彩票里什么叫屠龙| www.947094.com-时彩娱乐-| www.983122.com-玩时时彩死了多少人|