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.33245.com-体彩时时彩走势图| www.bw18.com-彩乐网福中网| www.27018.com-彩票跟单软件| www.cp7355.com-快三稳赚不赔技巧| www.54997.com-售后好的彩票app| www.81391.com-时时彩是不是赌博| www.h89.cc-奥鸿集团彩票合法吗| www.997522.com-时时彩源码论坛| www.sl51.com-重庆福彩中心| www.6324.cc-三彩服饰价位| www.643711.com-中国福利彩票作弊| www.90ax.com-49c彩票导航网| www.997480.com-快三最高邀请码| www.875036.com-竞彩嘉奖app| www.do67.com-时时彩有什么规律嘛| www.31qd.com-周日彩票开什么| www.648356.com-双色球天吉彩票诗谜| www.916599.com-网上最稳的彩票平台| www.sf01.com-高频彩票设计的原理| www.316888.com-中国福彩标志| www.599062.com-福彩今晚开奖号码是| www.845946.com-私彩案件-| www.72368.com-江苏快三和值遗漏表| www.698392.com-网上买彩票倍投好吗| www.65jv.com-山西省福彩中心电话| www.9008.top-乐彩论坛app下载| www.060342.com-快三预测算法| www.144809.com-时时彩外挂稳赢技巧| www.163142.com-今天福彩怪字神贴| www.580434.com-体彩最大弃奖| www.313140.com-大发快三计划助手| www.57423.com-福彩手机能投注吗| 大奖彩票www.11djcp.com| www.41co.com-七星彩自购盘| www.8853.cm-欢乐彩直播网站| www.316691.com-福彩logo-| www.776657.com-体育彩票追号| www.207474.com-快三江苏开奖| www.818100.com-足彩场次安排| 大赢家彩票平台www.730625.com| www.781677.com-吉林快三黑彩的技巧| www.008463.com-胜负彩19032| www.232768.com-新浪足彩比分| www.388732.com-谷歌分分彩开奖原理| www.145097.com-今日足彩-| www.584578.com-捕鱼注册送彩金| www.67745.com-婚恋被骗博彩10万| www.333148.com-体育彩票基础知识| www.76fk.com-七乐彩中六个多少钱| www.604446.com-d9彩票官方-| www.751408.com-彩票聋哑学校| www.137674.com-体育彩票快3直播| www.686678.com-3d专家彩乐乐| www.355763.com-常州体彩中心地址| www.25687.com-彩民周刊编辑组小宋| www.eq38.com-炫乐彩票官方网站| 博亿彩票www.626by.com| www.189062.com-网彩平台-| www.70ma.com-大神推荐足彩竞猜| www.901231.com-河北燕赵福彩排列五| www.295889.com-快3大彩鲸中奖助手| www.60609.cc-六6开彩开奖记录| www.696713.com-中国竟彩官网| www.983703.com-快三营业时间| www.840037.com-河南福彩开奖结果查| www.163619.com-体彩容错怎么打| www.838642.com-福彩3d乐彩网专区| www.984540.com-福彩3d小小鱼彩图| www.591531.com-国际彩票官网| www.336.cm-彩票守号中奖故事会| www.769392.com-好彩香烟新加坡版本| www.65664.com-幸运快三开奖查询| www.874349.com-湖北体彩在哪里兑奖| www.tn54.com-快三随机选号| www.329938.com-牛彩网牛彩吧| www.257693.com-快彩中奖助手app| www.696962.com-金鹰团队时时彩计划| www.xh88.cc-七彩国际-| www.163100.com-3d预测汇总彩吧网| www.037489.com-爱投彩票ios| www.89603.com-好彩蓝莓爆-| www.388366.com-华彩益理财-| www.424132.com-福利彩票内部讨论| www.0334.xyz-儿歌彩虹的约定简谱| www.5975.org-体彩杀号与胆码| www.951124.com-足彩500触屏版| www.68600.com-亮彩旗舰店-| www.884405.com-好运快三开奖结果| www.521208.com-三d彩报五码图| www.0681.net-开福彩-| www.5014.cc-旺彩开奖软件下载| www.606683.com-今天买彩票买什么号| www.02pu.cc-网上彩票开始了吗| www.8904.loan-竞彩比分4串1中奖| www.116674.com-福彩3d稳定和差| www.716322.com-彩票中大奖人的下场| www.55me.cc-大信彩票平台怎么样| www.937009.com-福星彩app-| www.379231.com-跟人买彩票网站诈骗| 趣彩彩票www.c177.com| www.sd72.com-吉林快三微信群严打| www.3178.xyz-高频彩登陆网址| www.725785.com-福利彩票有资料看吗| www.2738.xyz-黄岩西城福彩网点| www.23099.cc-怎么看彩票大小单双| www.739415.com-八彩对战-| www.376961.com-海南7星彩对数表| www.73908.com-博彩源码交易平台| www.101666.cc-qq7彩票网-| www.576522.com-河北体彩几点开奖| www.134035.com-好彩2好彩3-| www.414841.com-彩98彩注册-| www.45450.cc-快三缩水手机软件| www.078856.com-搜索山东体彩论坛| www.375496.com-广东省福彩36选7| www.919928.com-融创宝彩票输了几万| www.091.cc-烟台彩票-| www.7453.vip-体育彩票申请要求| www.313769.com-新浪爱彩-| www.729467.com-福彩双色球自动选号| www.696951.com-七星彩往期开奖号码| www.78vo.com-彩票20选8走势图| www.155101.com-彩票注册账号送彩金| www.745984.com-天天中彩票正规版| www.813577.cc-贵州快三派奖奖金| www.64gf.com-足彩8串9-| www.125267.com-福彩出奖号今天| www.543253.com-排3牛彩图迷| 中国福利彩票www.6364l.com| www.64va.com-福彩3d猜三同| www.8349.cn-福彩跑马开奖号| www.40nx.com-新浪彩票数字频道| www.176773.com-福彩五分快三兼职| www.405512.com-人工彩虹的物理原理| www.72.cm-永安彩票可信吗| www.7032.cc-易网彩票网彩| www.122712.com-最近彩票诈骗案例| www.756195.com-盈彩网彩票-| www.066139.com-甘肃快三表格图| www.ky06.com-江苏快三能玩不| www.1849.org-彩票八-| www.86725.com-3d福彩东丹图| www.069071.com-彩票注册绑卡送59| www.321380.com-七星彩梦册查码解梦| www.997326.com-利彩工具3d走试图| www.333851.com-手机上买体彩| www.509968.com-呼市体彩-| www.612967.com-新加坡乐星彩网站| www.37453.com-美狮彩票062| www.004502.com-彩神幸运飞艇安卓| www.72qf.com-体彩6场容错1场| www.4544.com-有人买彩票中奖的吗| www.46270.com-五福彩票最新版| www.288869.com-中国体育彩票名词| www.572014.com-彩票双色球这么玩| www.868571.com-七星彩和值24| www.hp12.com-足彩玩法介绍| www.y94.com-全国有多少个彩票站| www.98yh.cc-u9彩票安全不| www.04566.com-河北省彩票中心| www.119834.com-极速快三辅助器| www.447601.com-全天彩票计划助手| www.716591.com-彩铅排线方法图解| www.806828.com-足彩规则及奖金|