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.552097.com-东京1.5分彩计划| www.708956.com-亿豪彩票彩票app| www.822333.com-体彩868出现前后| www.948793.com-万彩吧免费下载| www.zi5.com-福彩3d玩发-| www.8ks.com-重庆实时彩软件| www.i39.site-港彩三中三高手论坛| www.12pq.com-彩8彩票网登陆| www.69fg.com-皇冠国际彩票登陆| www.421898.com-c97彩票网app| www.580378.com-大发时时彩五码计划| www.680196.com-福彩网络购买| www.776577.com-糖豆休闲快三第一套| www.921324.com-彩神争霸8官方下载| www.134.bid-彩虹屁男生-| www.6490.com-98c彩票.com| www.84oa.com-北京新彩华章| www.13wj.com-246123天好彩| www.669470.com-新浪体育彩票开奖直| www.862251.com-腾讯彩票安卓版下载| www.608853.com-致富福彩下载安装| www.909450.com-河北福彩快三彩经网| www.579327.com-0k00澳客彩票网| www.13770.com-新浪爱彩彩果| www.19862.cc-时时彩论坛贴吧| www.573880.com-福彩快乐10-| www.663897.com-中彩开奖-| www.781312.com-微彩吧下载网址| www.885413.com-南方双彩网首页| PK彩票www.www.23040.com| www.007081.com-时时彩qq群推广| www.163517.com-彩票代玩儿-| www.388452.com-福彩中奖后怎么兑奖| www.7707.com-七乐彩开机-| www.e94.com-七星彩彩开奖时间表| www.042.net-代打彩票是骗局吗| www.5062.pw-竞彩足球开停售时间| www.10808.cc-苏州体彩网开奖结果| www.059583.com-网上k彩好赚钱吗| www.3132.win-七星彩中奖号| www.634876.com-网上重庆市彩真劣| www.870477.com-必发彩票开奖网站| www.939422.com-福彩选四-| www.994544.com-重庆试试彩开奖结果| www.aq59.cc-贵州彩票11选五| www.si81.com-福彩3d走势图福| www.20bx.com-开彩票店诀窍| www.95460.com-体彩线上活动| www.961322.com-大众彩票可靠吗| www.739971.com-爱彩乐1分快三群| www.985967.com-360福彩-| www.aq45.com-湖北体彩-| www.vq52.com-彩专家人工定胆计划| www.618764.com-体彩大乐透誉京华| www.022217.com-今期彩图片-| www.111904.com-大吉彩票网开多久了| www.693861.com-体彩双色球机选号码| www.525045.com-时时彩概率计算软件| 大赢家彩票平台www.371679.com| www.910806.com-k彩是骗局吗| www.515432.com-七星彩去哪里买| www.762284.com-职业彩票生活| www.974769.com-无锡彩民中奖体彩| www.xj52.cc-福彩天地报在线| www.9027.vip-nba总冠军博彩| www.609162.com-体育彩票站几点上班| www.455261.com-彩票杀号技巧大乐透| www.611169.com-盈彩彩票苹果版| www.322266.com-《直播海南》七星彩| www.69259.cc-足彩九场开奖结果| www.999698.com-宝马彩票登录网页版| www.fv68.com-时时彩骗局举报方法| www.260455.com-买体彩是赌博吗| www.713107.com-体育彩票大奖新闻| www.995724.com-足彩计算公式| www.1975.vip-银川仟彩摸吧包厢| www.152989.com-福彩7乐彩开奖结果| www.5528.cm-福彩怎样账户充值| www.967695.com-招聘彩票计划导师| www.28289.com-昆山福利彩票转让| www.103600.com-广东彩钢夹芯板| www.798890.com-买彩票就上天天彩票| www.005.bid-甘肃亿彩快三查询| www.95793.cc-慈善福彩-| www.fy98.com-全民快三-| www.013293.com-特区网七星彩论坛| www.206578.com-彩神大发快3骗法| www.489864.com-2345彩票网登录| www.655678.com-爱彩乐老版-| www.762695.com-体彩千里马专家预测| www.893688.com-网络彩票线下| www.993327.com-足彩竞彩停售时间| www.mb26.com-快三官方下载| www.027097.com-时时彩赌博群| www.965899.com-买彩票怎么发朋友圈| 500彩票网www.97655m.com| www.dp89.com-吉林快三遗漏号| www.uf64.com-网上私彩和官通吃| www.00kd.com-彩票烂了一个角| www.902702.com-快三辅助器下载| www.973486.com-彩虹手机壁纸| www.pq9.com-韩国快三开奖| www.nz37.com-时时彩后二胆码技巧| www.n12.cc-靠谱的网上购彩平台| www.47ir.com-福彩六加一查询结果| www.9878.pw-彩票c66下载| www.76035.com-足彩如何稳定盈利| www.73142.com-长沙市福彩中心地址| www.704.mobi-篮球彩票怎么看| www.11739.cc-福彩质合号码走势图| www.082992.com-全国优秀彩票站| www.al.com-大发快三官方网站| www.676570.com-国家规定彩礼钱多少| www.318230.com-彩虹伞的玩法及儿歌| www.482008.com-下载亿彩彩票| www.626364.com-深圳市鑫彩晨科技| www.898900.com-一分钟快三怎么赚钱| www.61gb.com-福彩3d和跨-| www.583469.com-中彩股份北斗传媒| www.668631.com-非凡彩票下载安装| www.751969.com-手机上怎么彩票下注| www.858345.com-玩高频彩的最高境界| www.973049.com-彩虹世界app链接| www.237671.com-快三预测北京| www.198206.com-快乐彩开奖号| www.594964.com-4字彩票app-| www.62942.com-彩宝彩票提现难| www.028202.com-快乐网彩票是真是假| www.112181.cc-乐亿彩票下载安装| www.984993.com-鼎盛彩票网是真的吗| www.861186.com-五分⑥和彩app| www.408649.com-七星彩在哪里购买| www.796578.com-博冠彩票app下载| www.ks0.cc-查彩票开奖结果| www.rb36.com-甘肃快三倍投计划| www.841121.com-淘宝彩妆店铺推荐| www.901884.com-免费下载内蒙古福彩| www.973934.com-七天彩票官方网站| 快3彩票www.783802.com| www.i90.mobi-免费送彩金无需申请| www.43sx.com-喝彩的意思-| www.489348.com-七乐彩单式5等奖| www.211982.com-比分彩客网-| www.929935.com-北京全民彩-| TT彩票www.526021.com| www.12eq.com-肥东体彩-| www.48786.com-天津十一选五爱乐彩| www.120408.com-体彩多少天兑奖| www.460902.com-买什么彩票才能中奖| www.548941.com-彩票之家注册邀请码| www.614115.com-大丰彩票网9.9| www.686301.com-139彩票登录| www.757069.com-75彩票可以玩吗| www.883633.com-乐彩网快乐12| www.958801.com-彩票几天一次| 名门彩www.33997k.com| www.097306.com-体彩发行中心| www.tc1.cc-吉林快三开奖的走势| www.006524.com-今晚七乐彩开奖号码| www.103704.com-吉林快三快彩助手| www.163589.com-聚彩彩票真坑人| www.229555.com-爱乐透彩票新版下载| www.661530.com-足彩主和什么意思| www.899995.com-定州转让福利彩票站|