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.258097.com-全民福彩是真的假的| www.87130.com-彩经网3d杀号最准| www.499689.com-竞彩4串56-| www.619626.com-搜索491彩票| www.834405.com-日免红好彩价格| www.925316.com-深圳福利彩票投注站| www.ko.cc-极速快三预测| www.xy95.com-3d中奖彩票-| www.76ez.com-大众彩票网址| www.3729.com-五子彩球手机版| www.971867.com-头奖彩票官网| www.514.in-南昌市体育彩票网站| www.189289.com-下载内蒙古快三| www.121239.com-福彩3d平台微信| www.338579.com-彩尊手机客户端| www.730878.com-8k易彩快3破解器| www.50877.com-快三的跨度怎么看| www.052355.com-大发彩票客服| www.025038.com-金彩彩票app| www.68627.cc-新加坡天天彩资料网| www.be01.com-01彩票正规不| www.236.cm-美国45秒彩票| www.o90.com-婚内买彩票中奖| www.72zv.com-内蒙福彩中心地址| www.2347.vip-彩票三d要出什么| www.607693.com-彩铅画荷花池| www.881184.com-一定牛体彩应用| 彩吧www.586960.com| www.229042.com-一分快三走势技巧| www.qs49.com-体彩的宗旨-| www.233249.com-彩票走势图彩宝网| www.5725.cc-时时彩搭建开发公司| www.338195.com-爱彩网合买-| www.448363.com-说彩预测-| www.813512.com-彩票线报网-| www.931821.com-足彩跟单公众号| www.994809.com-好彩堂跑狗图彩报| www.mp44.com-快三预测一定牛北京| www.640780.com-新浪彩票竞技网| www.382837.com-澳洲彩票价格| www.614882.com-时时彩官方网下载| www.8048.biz-水彩3d画教程简单| www.348800.com-七乐彩合法吗| www.466446.com-北晚体彩-| www.590884.com-中国足球彩票球彩票| www.2363.shop-体彩排l三迷图| www.4876.biz-彩票模拟摇奖软件| www.6078.vip-奇门测福彩3d| www.73810.com-火箭娱乐时时彩| www.486908.com-足彩奇招pdf| www.567638.com-66彩票网-| www.639506.com-500彩票实体店| www.818615.com-彩乐汇是正规网站吗| www.959876.com-吉林快三到晚上几点| www.co36.com-彩客网提款提不出| www.958572.com-福彩3d中奖故事| 9号彩票www.627868.com| www.927996.com-51亿彩票巨奖骗局| www.oc4.com-河北快三今天跨度表| www.9yg.com-彩票老司机软件| www.95ai.com-众投彩官网-| www.xv54.com-梦见去彩票店买彩票| www.5352.wang-933彩票是真的吗| www.363593.com-快三一注中奖赔率| www.032948.com-七星彩选号码| www.817860.com-彩票专业走势| www.971228.com-爱彩彩票手机客户端| www.dj22.com-海南七星彩玩法规则| www.252745.com-彩票赛车-| www.36845.com-酷彩官网下载安装| www.018089.com-星彩吧-| www.565314.com-重庆7时彩代理| www.696363.com-彩票体彩走势图大全| www.829322.com-9彩计划网站| www.919892.com-制作彩票app价格| www.993508.com-体彩竞彩竞彩足球| www.hk30.com-旺彩预测软件下载| www.92uu.com-狂三本子彩第三| www.24422.com-k8彩票平台-| www.5538.me-天牛图库仙鹤王彩报| www.573420.com-彩票k线图预测| www.985398.com-关小刀足彩预测推荐| www.fn5.com-重庆时时彩维护公告| www.856124.com-幸运快三代玩微信| www.958794.com-518彩网登录地址| www.56et.com-分分彩杀号大全| www.2016.shop-跟彩-| www.274513.com-腾讯5分彩网址| www.350551.com-彩皇网时时彩| www.415768.com-七彩阳光视频下载| www.521049.cc-重庆时时彩彩彩票群| www.588623.cc-吉林福彩快三彩经网| www.657858.com-彩宝贝网工具| www.717088.com-十分彩网可靠吗| www.262266.com-快三统计-| www.337397.com-河北快三和值遗漏| www.218949.com-福建体彩31-| www.528828.com-竞彩实体店怎么申请| www.086878.com-6福彩票-| www.388921.com-快三奖金计算公式| 网易彩票www.07163d.com| 500彩票www.401265.com| www.fc55.com-五分钟开一次的彩票| www.423803.com-星彩和刘禅-| www.168911.com-快乐彩开奖结果| www.528582.com-管家婆彩图库图库| www.872247.com-福彩谜-| www.931402.com-天空彩免费资料大全| www.985957.com-时时彩是几点到几点| www.az62.com-体彩排列五开奖号| www.tc50.com-彩票平台排行| www.37871.cc-星光彩票是真的吗| www.5587.vip-所有天天存送彩票网| www.570359.com-七彩神仙鱼怎么养| www.644586.com-足彩火线伤停| www.kl26.com-新浪彩票双色球机选| www.453781.com-彩票怎么防伪| www.036523.com-彩宝贝杀号-| www.au4.com-武汉快三-| www.2883.cn-网络买彩票违法吗| www.7676.in-一出好戏彩票app| www.585263.com-彩宝彩票登录| www.49lf.com-34353羸彩天下| www.52120.com-吉利三分彩开奖结果| www.959389.com-彩票大本营彩民村| www.cp6130.com-彩票网-| www.yi43.com-彩票榜计划官方下载| www.20ox.com-七星彩16-| www.130818.com-七星彩最精准预测| www.209060.com-福彩排列3-| www.16cu.com-七彩娱乐官网注册| www.669898.com-凤凰彩票在线app| www.78ky.com-乐彩29期字谜总汇| www.600.cc-时时彩代理做了一年| www.31yn.com-彩虹宝宝免费看| www.390080.com-世界杯彩票买多少钱| www.796701.com-趣彩彩票违法吗| www.cai9066.com查询彩票开奖| www.589850.com-福彩小熊猫图谜发布| www.702995.com-发短信送彩金38| www.807889.com-陆慧明足彩任九推荐| www.920210.com-彩票gg安卓版| 大赢家彩票平台www.137165.com| www.974898.com-七星彩开奖预测最准| www.co55.com-福彩快三致富团队| www.34wb.com-35期7星彩-| www.544020.com-我要中彩票下载安装| www.533374.com-福彩投注限额| www.nc56.com-豪彩平台app| www.557992.com-香港博彩堂六六信息| www.7097.cm-七彩滨湖竹园幼儿园| www.53676.com-90彩票彩种-| www.447352.com-三地彩经-| www.611381.com-福彩5加1多少钱| www.700982.com-大发彩票平台官网| www.761574.com-福利彩票的种类| www.678583.com-足彩赔率即时| www.763707.com-摩羯足彩预测app| www.823753.com-彩票速杀表双色球| www.885199.com-玩时时彩哪个平台好| www.62345.com-彩票中奖概率排行榜| www.029321.com-彩票一购彩大厅| www.5592.cc-旺旺彩票怎么样| www.23481.com-贵州快三奖金设置|