jQuery蓝色的保险产品分类图片轮播特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

88 350 117



特效描述:产品分类 图片轮播。jQuery蓝色的保险产品分类图片轮播特效代码下载

代码结构

1. 引入CSS

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

2. 引入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. HTML代码

		<div style="height: 50px;">
			<!--高度填充可删除-->
		</div>
		<!--导航部分-->
		<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到