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天

知道了
亚洲28 www.27fn.com-体彩11选5彩票| www.811787.com-快乐双彩胆拖| www.3066.cm-彩天下登入网站| www.06133.com-248.com彩票| www.70344.com-7天彩票官方网站| www.062581.com-优彩网是怎么赚钱的| www.165440.com-彩6季票在那买| www.249938.com-八亿彩下载-| www.344815.com-棋牌彩票手机app| www.468566.com-2元彩票刮刮乐| www.136638.com-玩体彩屋犯法吗| www.363068.com-喜快三是哪里的彩票| www.110.cm-彩神iii-| www.7346.tv-世界杯冠军竞彩开售| www.85418.com-福彩双色球胆拖计算| www.073728.com-足球彩票预测大师| www.60006.com-大发快三模拟器软件| www.582091.com-安徽快三什么意思| www.3439.com-中国体彩竞彩规则| www.811401.com-体彩选号技巧| www.91156.com-日本加税好彩价格| www.9211.com-彩民村心水之家资料| www.247115.com-快三怎么算和值| www.328358.com-福彩论坛乐彩论坛| www.419876.com-老版本印象彩票| www.262042.com-富彩彩票下载| www.384573.com-彩票合同性质| www.486.tv-奖多多安全购彩页面| www.75796.com-捡的彩票能兑奖吗| www.035499.com-彩票合买统计| www.74299.com-时时彩黄金分割软件| www.873867.com-甘肃快三和值图表| www.019387.com-毕节彩票站-| www.529.site-好运来彩网-| www.990700.com-竞彩足球怎么玩能赢| www.9511.online彩钢板多少钱一米| www.632062.com-七彩虹图-| 好彩www.60123x.com| www.440599.com-湖北精彩十分规则| www.786970.com-盛兴彩票v1-| www.896297.com-20选5彩票导航| www.969205.com-网易足彩专家推荐号| www.cai73.cc-快三彩票骗局大揭密| www.288490.com-玩彩票什么叫龙| www.406418.com-七星彩奇偶取法| www.526821.com-分分彩杀号绝招| www.5086.vip-属蛇的彩票中奖号码| www.123411.cc-福彩双色球开奖信息| www.025896.com-网彩怎么稳赚不赔| www.683303.com-七星彩私彩网投注册| www.sx17.com-福利彩票都是几位数| www.cp1.link-贵州福彩助手| www.1603.wang-全球彩票苹果手机| www.5380.me-彩53跑彩票合法吗| www.654617.com-江西彩票亿元大奖| www.762921.com-小学生中彩票| www.846879.com-福彩蛋蛋是什么| www.80rb.com-福彩杀6码-| www.9779.xyz-福利彩票作假新闻| www.005.live-体彩遗漏数据统计| www.673212.com-481彩票倾家荡产| www.754573.com-怎样兑换彩票| www.819091.com-彩票加倍-| 天天彩票www.150881.com| www.501520.com-彩客网比方直播| www.bl75.com-彩神软件-| www.775009.com-香港哪里可以买彩票| www.887936.com-彩票推广方案| 福利彩票www.flff0.com| www.nm47.com-竞彩诈骗-| www.59929.cc-谁玩过幸运快三骗局| www.085599.com-彩名堂是骗局| www.206386.com-全国黑彩举报电话| www.336.cm-彩票守号中奖故事会| www.760300.com-彩票彩客网310| www.382625.com-买彩彩票-| www.587083.com-湖北快三豹子必出| www.808959.com-体彩任九场胜负| www.024438.com-福彩30选5奖金| 爱购彩票www.igcp9.com| www.196326.com-彩票高手-| www.297215.com-乐购彩票平台合法吗| www.399621.com-海南私彩天涯论坛| www.786773.com-今天的彩票中奖号| www.868040.com-七星彩第一位走势图| www.937888.cc-体彩网七星彩开结果| 13e彩票www.128760.com| www.866258.com-中国体彩下载软件| www.930027.com-香港牛蛙彩票网址| www.983591.com-彩16网址是多少| www.42jy.com-七星彩要中几个数字| www.7516.vip-品彩服饰旗舰店| www.423600.cc-如意彩票积分商城| www.2516.vip-福彩店开店必备技巧| www.xy18.com-d9彩票d9cc-| www.613830.com-强强双色球彩票软件| www.711111.com-私售彩票-| www.821342.com-今天彩圣字谜总汇| www.917860.com-快三和值大小规律| 500万彩票www.35155k.com| www.250236.com-中彩彩票zc01| www.4389.biz-中国福利彩票湖南| www.4386.cn-小熊猫福彩3d| www.032636.com-喜彩网-| www.62iv.com-福彩怎么样-| www.5395.biz-如何用彩铅画星空| www.22914.com-福彩3d心太黑了| www.043977.com-最新足彩310报纸| www.610943.com-足彩竞彩赛果查询| www.699320.com-网上购彩合法吗| www.791028.com-福利彩票双色球下注| www.866550.com-昨天福利彩票中奖| www.919286.com-彩票预测福彩3d| www.977642.com-世界杯足彩盘口| www.qn0.cc-江苏省体彩兑奖中心| www.20hx.com-也买彩平台手机版| www.942160.com-高频彩票将停售| www.bl69.com-下彩彩票安卓版| www.0281.com-釉上彩和釉中彩| www.02511.com-玩彩票软件怎么样| www.871511.com-福彩双色球投注软件| www.973057.com-彩虹世界男同软件| 彩票3www.891079.com| www.257628.com-凤凰彩票-| www.345629.com-福彩刮刮乐中奖代码| www.430420.com-竞彩专家推荐走势图| www.529646.com-中国彩民更懂彩民| www.669804.com-中国彩票分类| www.581172.com-七星彩交流轮胎坛| www.657176.com-牛蛙彩资料大全图库| www.761429.com-好彩妹仙藤咒语| www.821868.com-彩票买了几百万| www.939685.com-重庆彩票官网| www.991521.com-北京赛车送彩金| www.aw39.com-福彩快三江西| www.66dq.cc-三亚七星彩代理| www.4816.top-日报即时开彩| www.64cz.com-南通童彩-| www.552487.com-爱乐彩江苏十一选五| www.951633.com-红彩网络直播平台| www.001285.com-大发快三骰子下载| www.977899.cc-纸箱数码彩色印刷机| www.700780.com-快三反计划倍投| www.900834.com-耽美彩漫肉少爷三人| www.969123.com-体育大乐透彩票| www.cp7559.com-快三中奖奖金是多少| www.xx44.com-彩票平台投注app| www.61zu.com-彩31黑平台-| www.527426.com-五星彩是什么平台| www.yq38.cc-31选7私彩-| www.351589.com-买彩票中一注多少钱| www.019258.com-福彩5等奖多少钱| www.898595.com-福彩试机号今天号| www.cai900.cc-一分快三是什么意思| www.604496.com-彩票打码量是什么| www.660416.com-什么眼镜能看透彩票| www.839589.com-请查一下福利彩票| www.905298.com-福彩跨度振幅| www.954507.com-彩宝彩票下载苹果| www.991047.com-uu快三代理-| www.li6.com-河北省快三出奖| www.mx55.com-彩票有手机客户端吗| www.i09.cn-彩经网旧板走势图| www.31cr.com-周一至周日开奖彩票|