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天

知道了
58福彩 www.9883.vip-加强彩票市场通知| www.702923.com-彩票双色球手机选号| www.775822.com-邯郸体育彩票站| www.9787.pw-体彩乐彩排列三论坛| www.622100.com-五福彩票官方平台| www.ab34.com-贵州快三追号计划| www.5735.top-今日说法彩票纠纷| www.776846.com-时时彩前三走势图| www.871006.com-三国杀星彩-| www.948966.com-购彩app真的吗| 博亿彩票www.664by.com| www.hy58.com-燕赵福彩排列七| www.j99.org-中国足球彩票新浪网| www.001.biz-非凡彩票5198| www.705240.com-福彩天气网保真| www.332429.com-彩879平台下载| www.430023.com-重庆快乐十分开彩报| www.68644.com-新加坡福和彩| www.729232.com-新彩票网121| www.815053.com-彩票对打新套路| www.897020.com-重庆时时彩长龙记录| www.972423.com-古风彩铅少女| www.aw74.com-3d彩报-| www.259562.com-彩票生成器-| www.961905.com-下载买彩票双色球| www.2726.cc-福利彩票多少倍| www.5629.in-福彩刮刮乐送金条| www.772956.com-快3和值中奖彩票图| www.863580.com-彩票数据采集软件| www.933342.com-各省快三走势图| www.984561.com-什么是彩票诈骗| www.am45.cc-购买双色球彩票网站| www.829367.com-新乐彩网站-| www.948897.com-3d福利彩票开奖号| www.cp6651.com-河南福彩快三开奖| www.zs11.cc-深圳一定牛彩票网| www.8288.in-梦想彩票站彩种| www.89863.cc-推店彩票是骗人的嘛| www.074155.com-彩6app下载-| www.79pg.com-內蒙古福彩快3| www.188041.com-大发快三预测网站| www.271962.com-中原彩票是不是骗局| www.356899.com-大庆彩票站出兑| www.447348.com-福彩公益宣传标语| www.78036.com-足彩18175-| www.215848.com-百宝彩电子走势图| www.043900.com-微信彩票帮手扫一扫| www.5795.com-玩彩票输了五千想死| www.13ku.com-彩智彩票官方网站| www.828258.com-大豪客彩票-| www.929061.com-西安彩票刘亮| www.987305.com-手机版平安彩票| www.cb04.com-彩6-| www.212574.com-私彩老平台-| www.336549.com-9万彩票安卓版斗牛| www.765917.com-福彩三第走式图| www.882569.com-重庆五分彩官方平台| www.968979.com-网易彩票预测专家| www.cr91.cc-广西福彩快三选号器| www.m48.top-福彩网圈套-| www.62cl.com-今日足彩直播分析| www.1840.org-老彩民高手心水资料| www.9567.in-武汉福彩店铺转让网| www.50cq.com-福彩3d老彩民心得| www.501000.com-什么时候有彩色相片| www.577029.com-人人中彩票解绑| www.644258.com-分分彩后二-| www.839543.com-手机版pc彩票| www.901317.com-彩票的常识-| www.985759.com-福彩3d图库总汇| www.jv44.com-天天彩票助手官方| www.409094.com-彩吧中国彩吧| www.522113.com-拼搏在线彩票网官网| www.612589.com-上海福彩开奖| www.60eg.com-农村结婚彩礼图片| www.2677.in-牛蛙彩票安卓版下载| www.9136.cn-七乐彩2000-| www.361725.com-彩票开机号彩宝| www.559002.com-彩虹的约定儿童视频| www.641106.com-福彩双色球爱彩| www.k09.top-分分快三技巧顺口溜| www.32rc.com-神话彩票官方网站| www.93qj.com-竞彩篮球购买时间| www.650723.com-陈飞虎水彩写生视频| www.12578.com-彩票兑奖时间周几| www.71376.com-甘肃时时彩十一选五| www.051504.com-高频彩平台推荐| www.382333.com-博汇彩票手机版下载| www.515917.com-购彩网公式规律| www.594436.com-西安三彩家集团| www.667981.com-福利彩票买哪个| www.758768.com-太湖字谜多彩| www.837053.com-足球竞彩一定牛下载| www.225476.com-加微信代玩彩票骗局| www.fb86.com-百彩网免费资料| www.706567.com-福利彩票如何提现| www.883143.com-网络私彩平台排行榜| www.fn14.com-体彩试机号和金马| www.665781.com-彩宝彩票注册| www.787970.com-c27彩票官方| www.861016.com-时时彩任选三| www.930798.com-中彩网彩票开奖3d| www.981686.com-体育彩票店挣钱吗| www.cp655.cc-代理快三刷流水| www.aw40.com-河南快三下载安装| www.24wt.com-福利彩票机转让信息| www.183870.com-快三复式中奖规则| www.77136.cc-彩票讨论贴吧| www.257270.com-彩83app下载| www.ei02.com-北京快乐彩开奖走势| www.627867.com-体彩任选9玩法| www.83521.com-所有彩票计划| www.274086.com-三分时时彩如何破解| 九九集团www.99jth.com| www.075292.com-开彩门-| www.92268.cc-湖北十一选五乐彩| www.594102.com-优乐彩好假-| www.841009.com-彩妆店加盟排行| 凤凰彩票www.3479k.com| www.02aj.com-关于彩虹的句子| www.56pl.com-北京体彩一等奖| www.827831.com-彩民彩票怎么提现| www.009797.cc-福彩手机-| www.555627.com-快三豹子多少钱奖金| www.947234.com-福利彩票造假| www.359557.com-彩票指南杨凯大乐透| www.758383.com-彩票01是正规的吗| www.685121.com-福彩走试图彩宝网| www.075529.com-类似瑞彩祥云的网站| www.80689.com-看体彩走势图| www.54418.com-大学生买彩票的群| www.62839.cc-360竟彩篮球| www.841938.com-体彩是几位数| www.486132.com-三分彩投注技巧| www.13144.cc-香港彩富网-| www.186.in-彩铅画的真假难辨| www.3954.vip-韦德竞彩投注官网| www.397723.com-七星彩长局表| www.167996.com-宁夏快三-| www.5480.xyz-长春竞彩网点查询| www.77894.com-福利彩票客服| www.3468.vip-澳客彩双色-| www.260549.com-内蒙古快三一码遗漏| www.616446.com-竞彩胜平负什么意思| www.632041.com-七彩虹网驰2060| www.293275.com-河南福彩智慧彩下载| www.393182.com-家乡风景画彩铅画| www.931952.com-福彩总局-| www.984851.com-高频彩赚钱吗| www.ao2.cc-河南快三中奖规则| www.rz53.com-电热水器快三秒| www.672707.com-网易彩票关了吗| www.1413.cm-福彩双色球杀红号| www.006515.com-好彩一开奖历史纪录| www.444068.com-心脏彩超sv44| www.562338.com-快三号码有多少| www.642835.com-胜负彩一手机新浪网| www.720280.com-七乐彩胆拖玩法| www.814638.com-棋牌彩票满提现| www.890855.com-快三一天开几期| www.964064.com-极速六个彩开奖结果| www.kb01.com-体彩11选5是赌博| www.w68.xyz-信彩计划在线计划| www.948173.com-程远众彩网双色球|