QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 導航菜單 > jQuery藍色的保險產品分類導航圖片輪播布局

双色球尾球分布图: VIP商用 jQuery藍色的保險產品分類導航圖片輪播布局

jQuery基于superslide開發制作藍色的保險產品分類導航菜單和寬屏的圖片滾動輪播效果代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

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>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了