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.043826.com-hk百彩网资料网址| www.956108.com-体彩足彩竞猜网| www.277255.com-广西快三一定牛网站| www.049463.com-彩票的常识-| www.191121.com-内蒙快三专家推荐号| www.750968.com-彩店宝彩票下载安装| www.156053.com-好彩平台是诈骗吗| www.241934.com-七星彩如何看规律| www.69ii.com-聚乐彩jlc-| www.vs37.com-三宝乐购彩票合法吗| www.23055.cc-赢彩彩票是正规的吗| www.f47.com-彩票网址大全网址| www.462209.com-彩票规则漏洞| www.53762.cc-澳洲时时彩的网址| www.216007.com-七星彩稳赚万能码| www.358167.com-彩票中奖了如何领取| www.549333.com-锋彩直播app下载| www.660208.com-五星竞彩靠谱吗| www.cai4455.com河南快三走势| www.802003.com-查体彩排列五开奖号| www.151713.com-移动彩票软件下载| www.881036.com-福利彩票机器人北京| www.987848.com-彩票行家网址| www.ep49.com-新华论彩-| www.w70.cn-掌上购彩是什么| www.83jh.com-微信福彩快三| www.17kn.com-关于彩票的书籍| www.0945.vip-福彩3d结果-| www.057818.com-福彩3d第三版彩图| www.189495.com-快三单双术语| www.566690.com-丰大彩票下载| www.791862.com-中国福彩43期| www.qy.com-快三彩票助手| www.76do.com-福彩七乐彩派奖规则| www.8597.biz-分分钟中彩票软件| www.071038.com-四川彩礼一般给多少| www.318045.com-中国福彩兑奖规则| www.cp2108.com-一分快三稳赢技巧| www.a26.biz-彩九苹果版-| www.202684.com-彩38下载-| www.1071.org-足彩10串1013| www.20169.cc-大乐透新浪爰彩走势| www.2000.cm-下载49彩票-| www.323789.com-七乐彩随机-| www.479777.com-竞彩单场比分规则| www.75093.com-中彩网首页官网预测| www.088262.com-多彩网彩票官网| www.2147.me-濠江彩票与神童彩开| www.1194.vip-彩票回补正负| 福彩www.2109r.com| www.32849.com-佰万彩票是真的吗| www.887531.com-买全球足球彩票| www.980854.com-金彩网彩票马会| www.0490.xyz-360彩票代购大厅| www.051120.com-上海快三和值跨度表| www.zj48.com-聚鑫彩票app| www.520841.com-体彩中奖喜报| www.010609.com-深圳熊猫彩票| www.006815.com-体育彩票竞彩结果| www.ur39.com-内蒙快三投注平台| www.689309.com-5分时时彩在线计划| www.q64.xyz-福建快三未出号| www.381453.com-传统足彩14场分析| www.489258.com-彩工网下载-| www.649062.com-24色彩墨-| www.26181.cc-雨后彩虹形成视频| www.007758.com-大乐彩今天开奖| www.121640.com-合买彩票的网站| www.247448.com-上海快三时间段| www.333023.com-体彩三d开奖结果| www.529352.com-怎么制作彩虹玫瑰| www.6423.xyz-福彩中奖提醒软件| www.789581.com-竞彩赌博-| www.878217.com-3d牛彩网图谜总汇| www.op98.com-废彩票回收-| www.1804.me-快三34期-| www.132425.com-豪彩vipapp| www.258294.com-极速快彩-| www.108302.com-彩票差点中奖的心态| www.305109.com-福彩34期-| www.389609.com-加盟体彩站需多少钱| www.228322.com-七乐彩兑奖对照表| www.238.cc-彩票多少天一期| www.779878.com-中彩易彩票-| www.27237.com-任九足彩开奖| www.967994.com-宁夏体彩新11选5| www.bs0.com-728彩票app-| www.tg65.com-安徽福利彩票双色球| www.cp135.com-福彩快三是不是骗局| www.268226.com-668彩票网下载| www.266077.com-彩票竟技风暴| www.623583.com-中国福利彩票最低奖| www.698150.com-彩铅星空画教程视频| www.781394.com-百乐彩官网址| www.cg80.com-时时彩代理刷流水| www.zx65.com-大通彩票线路导航| www.782342.com-乐和彩票下载安装| www.637821.com-福利彩票不公正| www.885060.com-3d天天中彩吧| www.962998.com-查福利彩票七乐彩| 天朝彩票www.58181.cc| www.152211.com-好彩票专业版安卓版| www.236712.com-竞彩足球胜平负| www.624922.com-51彩票可信么| www.470910.com-彩票暴富小说| www.555249.com-必红彩票下载| www.613145.com-福彩3d新布衣| www.875797.com-彩票彩票2元网| www.3748.com-辽宁省福利彩票3d| www.399371.com-二元买彩票的故事| www.099988.cc-南方彩-| www.37wq.com-拾柴七星彩长局| www.603337.com-卓易彩票官网地址| www.678656.com-网易足彩体育| www.788399.com-福彩专家预测推荐号| www.853285.com-幸运彩票提现失败| www.942941.com-百姓彩票时时彩| www.cp9110.com-购彩吧-| www.d31.com-足球彩票即时比分| www.1100.com-上海福彩客户端| www.75762.cc-福彩3d乐彩静态版| www.w88.win-福彩3d杀跨高手| www.74xp.com-大乐透彩票分几种| www.120721.com-3d专家疯狂彩迷| www.45139.cc-彩票pk10负盈利| www.388763.com-盈盈彩票是真的吗| www.55uo.com-电话买彩票-| www.58963.com-拉萨有彩票游戏机吗| www.318995.com-时时彩快3骗局| www.406768.com-七星彩投注官网| www.511072.com-彩虹张惠妹什么意义| www.579372.com-锋彩直播源下载| www.633710.com-豫彩通咋下载| www.683928.com-彩票店电话微信| www.739297.com-买彩票幽默图片| www.793130.com-福利彩票如何看中奖| www.851915.com-竞彩网怎么作弊的| www.660392.com-腾讯ai彩预测| www.724843.com-买彩票就是赌博| www.789637.com-七星彩最近十期今天| www.8666.cm-福彩双胆预测| www.246803.com-福彩3d开奖结果| www.765956.com-十分彩开奖结果| www.855060.com-天天爱彩票提现不了| www.912403.com-七乐彩下期号码推荐| www.968054.com-福彩案怎么发现的| www.mv8.com-内蒙快三冷号| www.992136.com-时时彩定位胆规则| www.843366.com-福彩与慈善的关联| 亚投彩票www.ya013.com| www.ks71.com-那个平台能买快三| www.70470.com-55彩票充值-| www.811472.com-八仙过海艳彩归来| www.374646.com-2019彩吧图库| www.576794.com-关于彩票的图片大全| www.672098.com-彩宝彩票客服平台| www.787928.com-体彩排列5二等奖| www.954384.com-90年亚运彩票| www.92905.com-3分快彩-| www.075231.com-500彩票预测| 500彩票www.50788r.com| www.573430.cc-众恒彩票app下载| www.717950.com-彩票平台刷水| www.404790.com-猜冠军彩票pk10|