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.lp46.com-51中彩官方下载| www.32qo.com-我想福利彩票| www.hx13.com-三的开机号今天福彩| www.467118.com-最新彩票中奖公告| www.029521.com-虚拟博彩-| www.949715.com-给账号代玩时时彩| www.233802.com-爱乐彩中奖助手下载| www.422600.com-长沙体彩销售网点| www.018972.com-手机足彩缩水软件| www.825328.com-竞彩猫好彩频道直播| www.321698.com-人工智能彩票预测| www.276892.com-吉林快三跨度和值表| www.455964.com-痴迷买彩票的案例| www.594939.com-彩票复式计算器软件| www.702655.com-盛澳竞彩联盟合法吗| www.8997.top-澳门2分彩-| www.900027.com-天天竞彩app下载| www.64sz.com-038彩票软件下载| www.968042.com-陕西假宝马彩票| www.969342.com-梅州市福彩中心| www.vf83.com-福彩三地跨度走势图| www.334.tv-彩票47-| www.325662.com-今晚七星彩开| www.97fi.com-中国竞彩票-| www.767265.com-今日竞彩比分直插| www.dw82.com-长春快三查询| www.860203.com-96068彩票平台| www.940509.com-易彩快三大师计划| www.998780.com-平顶山市彩票点| www.fr71.com-百盈快三计划网| www.rr0.com-上海快三走势图和| www.423122.com-海南彩票梦册| www.031990.com-阿里彩票开多久了| www.124141.com-河北福彩排五开奖| www.228455.com-河南彩色铝板| www.306301.com-赠送的彩票纠纷| www.203655.com-六给彩票玩法规则| www.306710.com-关于彩票的调侃段子| www.384512.com-第9彩票-| www.588381.com-七星彩19024| www.1912.net-深圳东方亮彩厂好不| www.22570.com-星彩月英孙尚香无惨| www.024054.com-福彩票3d黄金杀码| www.761647.com-甘肃快三中奖秘诀| www.871464.com-福利彩票三d开机号| www.947692.com-江西快三下期预测| 大赢家彩票平台www.287926.com| www.id27.com-买彩金的都受骗了吗| www.a81.cn-打彩票的公式| www.54zf.com-海南七星彩信誉网投| www.99721.cc-c6、.com彩票| www.444058.com-心脏彩超参考值| www.559638.com-甘肃陇彩宝app| www.628228.com-大赢家彩票是干嘛的| www.315212.com-幸运彩彩票平台| www.483932.com-足彩比分竞猜规则| www.568241.com-彩票33提现-| www.202560.com-67彩票-| www.ec62.com-博众时时彩软件下载| www.763199.com-足球彩票什么软件买| www.867566.com-七星彩昨天出什么奖| www.955959.com-彩票上瘾违法吗| www.ci06.com-体彩pl3平台出租| www.6853.top-体彩飞鱼有什么规律| www.790633.com-彩票机选号中奖| www.5282.pw-搜狗彩票基本走势图| www.6031.site-云南彩票未领奖| www.ai28.com-河南彩票开奖481| www.83798.cc-买彩票的软件有哪些| www.062123.com-快三提现退回| www.176701.com-快三开奖一定牛| www.629275.com-六福彩票靠谱吗| www.727081.com-明彩-| www.228013.com-河南快三未出的号码| www.860207.com-时时中彩票安卓版| www.932661.com-重庆时时彩官方玩法| 幸运彩票网www.33598p.com| www.f24.link-彩票网址大全导航| www.298.hk-七星彩中大奖| www.568722.com-彩票中奖的书| www.to2.cc-南昌福彩网-| www.8856.in-彩狮-| www.1679.cc-粤海彩票高手料| PK彩票www.250757.com| www.975875.com-福彩排七兑奖规则| www.bu22.com-网投彩票是什么意思| www.uk29.com-海南四星彩开奖结果| www.16oh.com-体育彩票19033| www.022592.com-五百万彩票开奖结果| www.655935.com-体彩排列三3码遗漏| www.220312.com-信誉高的彩票网站| www.454076.com-乐彩网提现过程| www.799025.com-长城彩票网址| www.2pj.com-黑彩可不可以提现| www.38352.cc-彩票每天领红包| www.905037.com-捷豹彩票平台地址| www.973248.com-金利彩票下载安装| 幸运彩票www.773618.com| www.gw23.com-彩票计划员是骗人的| www.625308.com-中国福彩一定牛| www.698137.com-浙江体彩飞鱼下载| www.xa79.com-南国彩票论坛坛| www.497890.com-婚恋彩票骗局| www.695718.com-彩票网站源码下载| www.791945.com-彩狮时时彩计划| www.865577.com-彩票中奖最多多少钱| www.927908.com-新彩吧图库-| www.983756.com-518彩网app-| www.jf9.com-八八彩票-| www.383089.com-大智慧彩票图表| www.383995.com-体彩接口-| www.375723.com-安徽宣城彩票中奖| www.033476.com-彩站宝怎么发跟单| www.3868.cm-七星彩定胆杀号| www.521255.com-彩吧vip快三| www.695602.com-竞彩怎么看出平局| www.970523.com-河北福彩排七| www.0149.com-色彩颜色-| www.089728.com-彩票客源-| www.28483.com-合发彩票是真的吗| www.070035.com-甘肃体彩开奖| www.363658.com-雨后彩虹什么意思| www.755018.com-彩经网吉林快三| www.983361.com-彩31彩票领导官网| www.750.cn-怎样下载彩库宝典| www.835683.com-好彩36怎么玩| www.674507.com-爰彩人彩票网| www.962358.com-澳客彩票网app| www.647364.com-彩坛至尊免费料大全| www.267261.com-彩票倍投和稳赢吗| www.503886.com-万豪国际彩票网址| www.611124.com-广西快三封盘时间| www.150152.com-福彩积分查询| www.758586.com-中彩网有哪些| www.025794.com-包头福彩中心营业员| www.271433.com-广东好彩中奖规则| www.447258.com-竞彩1800万大奖| www.ww67.com-彩票预测大全下载| www.874949.com-信博网彩票平台| www.4641.org-彩票中奖神奇预测术| www.1302.vip-十大黑彩平台| www.453898.com-大星彩票开奖查询| www.663299.com-数字彩票直通车| www.cp424.com-江西快三一定牛| www.25202.com-桃花林彩铅画| www.271597.com-快三012路-| www.405551.com-体彩排列三句话| www.cai6784.com今日河北快三预测| www.970633.com-迷彩兔怎么打不开| www.968084.com-彩票刘亮-| www.5250.vip-彩宝贝导航-| www.cb46.com-黑彩为什么总是输| www.277401.com-双色球牛彩网| www.78526.com-解太湖双彩网| www.id2.cc-内蒙古11选5购彩| www.227635.com-彩民彩票双色球中奖| www.hg99.com-极速快三全天计划| www.45aw.com-彩虹电影台节目表| www.3685.biz-福彩3d任意复选图| www.005494.com-518彩票网址导航| www.108440.com-打彩网站-| www.209438.com-福彩排列5怎么玩| www.298573.com-兰州市体彩中心电话| www.363527.com-中五百万大奖彩票图|