jQuery蓝色的保险产品分类导航图片轮播布局

jQuery基于superslide开发制作蓝色的保险产品分类导航菜单和宽屏的图片滚动轮播效果代码。

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/nav.css" />
<link rel="stylesheet" type="text/css" href="statics/css/slider.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="nav">
	<ul>
		<li>
			<label><i></i>全部保险产品</label>
			<ul class="side" style="display:block;">
				<li>
					<a href="#"><i class="side_t icon-one"></i>健康保险</a>
					<div class="side_main">
						<dl>
							<dt><strong>健康保险</strong></dt>
							<dd>
								<a href="#">
									<strong>安享康健2018重疾保障 <i class="icon-hot"></i></strong>
									<span>最高赔付116万，全新升级第7代</span>
								</a>
							</dd>
							<dd>
								<a href="#"><strong>悦享康健重疾保障</strong> <span>130种疾病+最高赔付76.8万+最长保至100岁</span> </a>
							</dd>

							<dd>
								<a href="#"><strong>新乐康无忧住院津贴</strong> <span>大小住院手术都能补贴，拿完津贴还能返保费</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>老友安心防癌保险</strong> <span>45-70岁专享，最高40万癌症关爱</span> </a>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<a href="#"><i class="side_t icon-two"></i>儿童保险</a>
					<div class="side_main">
						<dl>
							<dt><strong>儿童保险</strong></dt>
							<dd>
								<a href="#"><strong>宝贝启航2018综合保障 <i class="icon-hot"></i></strong> <span>教育金+重疾+住院+意外医疗</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>珍爱未来教育金</strong> <span>教育深造连续8年领钱</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>百万守护（少儿）意外险</strong> <span>14万意外医疗+154万意外保障+140%返还</span> </a>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<a href="#"><i class="side_t icon-three"></i>意外保险</a>
					<div class="side_main">
						<dl>
							<dt><strong>意外保险</strong></dt>
							<dd>
								<a href="#"><strong>百万守护（少儿）意外险<i class="icon-hot"></i></strong> <span>14万意外医疗+154万意外保障+140%返还</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>百万守护（成人）意外险</strong> <span>高达300万意外保障+20万意外医疗</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>顺心天天一年期综合意外保障<i class="icon-new"></i></strong> <span>每天只需1元起</span> </a>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<a href="#"><i class="side_t icon-four"></i>年金保险</a>
					<div class="side_main">
						<dl>
							<dt><strong>年金保险</strong></dt>
							<dd>
								<a href="#"><strong>招盈六号年金（分红型）</strong><span>养老无忧，幸福传承</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>筑福金生年金（非分红型）<i class="icon-new"></i></strong> <span>终身领取，安享退休</span> </a>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<a href="#"><i class="side_t icon-five"></i>银行保险</a>
					<div class="side_main">
						<dl>
							<dt><strong>银行保险</strong></dt>
							<dd>
								<a href="#"><strong>自在人生终身年金</strong><span>终身领取，锁定未来</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>心悦人生综合保险</strong><span>45种重大疾病+意外保障+满期保险金</span> </a>
							</dd>
							<dd>
								<a href="#"><strong>珍爱一生百分百重疾保障</strong><span>特定疾病多重赔付，保至100岁</span></a>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<a href="#"><i class="side_t icon-six"></i>高端医疗</a>
					<div class="side_main">
						<dl>
							<dt><strong>高端医疗</strong></dt>
							<dd>
								<a href="#"><strong>醇享人生个人高端医疗保险<i class="icon-new"></i></strong><span>醇享健康，尊贵人生</span></a>
							</dd>
						</dl>
					</div>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="current">首页</a>
		</li>
		<li>
			<a href="#">个人与家庭保险</a>
		</li>
		<li>
			<a href="#">团体保险</a>
		</li>
		<li>
			<a href="#">客户服务</a>
		</li>
		<li>
			<a href="#">关于我们</a>
		</li>
	</ul>
</div>
<!--导航结束-->

<!--轮播部分-->
<div class="slider">
	<div id="slideBox" class="slideBox">
		<div class="hd">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="bd">
			<ul>
				<li><img src="statics/images/slider1.jpg" /></li>
				<li><img src="statics/images/slider2.jpg" /></li>
				<li><img src="statics/images/slider3.jpg" /></li>
				<li><img src="statics/images/slider4.jpg" /></li>
				<li><img src="statics/images/slider5.jpg" /></li>
				<li><img src="statics/images/slider6.jpg" /></li>
			</ul>
		</div>

	</div>
</div>
<!--轮播结束-->

<script>
	//轮播
	jQuery(".slideBox").slide({
		mainCell: ".bd ul",
		effect: "left",
		autoPlay: true
	});
</script>

使用声明

1. 本站所有素材（未指定商用），仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后，只拥有使用权，著作权归原作者及17素材网所有。
3. 原创商用和VIP素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途，织梦系统商业用途请预先授权。

查看演示下载资源

0 12340 57

软件 Dreamweaver
格式 HTML
作者玫琳凯
版权 © 原创商用（独家） i

版权声明

此作品是由17素材网签约用户上传，17素材网拥有版权；未经17素材网书面授权，请勿作他用。人物肖像，字体及音频如需商用需第三方额外授权；

17素材网尊重知识产权，如知识产权权利人认为平台内容涉嫌侵权，可通过邮件：3264130392@qq.com提出书面通知，我们将及时处理。

网站提供的党政主题相关内容（国旗、国徽、党徽...），目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。