jquery 实现金融理财网站导航二级菜单以及宽屏图片轮播特效,基于superslide开发,结构简单清晰,jquery参数均可修改,下载即可使用。
使用方法:
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="aui-header">
<div class="aui-comm-box clearfix">
<div class="aui-nav-logo">
<a href="#">
<img src="images/icon-logo.png" alt="" class="aui-nav-logo1">
</a>
<a href="#">
<img src="images/icon-gf.gif" alt="" class="aui-nav-logo2">
</a>
</div>
<div class="aui-nav-nav">
<dl class="clearfix">
<dd class="on">
<h3 class="aui-clear">
<a href="#">首页</a>
</h3>
</dd>
<dd>
<h3>
<a href="#">财富管理</a>
</h3>
<div class="aui-hot"></div>
<ul class="aui-nav-list">
<li>
<a href="#">MM计划</a>
</li>
<li>
<a href="#">M+计划</a>
</li>
<li>
<a href="#">XX包</a>
</li>
<li>
<a href="#">有道财富</a>
</li>
</ul>
</dd>
<dd>
<h3>
<a href="#">个人信贷</a>
</h3>
<ul class="aui-nav-list">
<li>
<a href="#">开借</a>
</li>
<li>
<a href="#">房产贷款</a>
</li>
<li>
<a href="#">高管股权贷</a>
</li>
<li>
<a href="#">高管信用贷</a>
</li>
<li>
<a href="#">股票质押贷</a>
</li>
<li>
<a href="#">商通贷</a>
</li>
</ul>
</dd>
<dd>
<h3>
<a href="#">企业金融</a>
</h3>
<ul class="aui-nav-list">
<li>
<a href="#">企业信贷</a>
</li>
<li>
<a href="#">过桥垫资</a>
</li>
<li>
<a href="#">股权投资</a>
</li>
<li>
<a href="#">股权质押</a>
</li>
<li>
<a href="#">财务顾问</a>
</li>
</ul>
</dd>
<dd>
<h3>
<a href="#">金融租赁</a>
</h3>
</dd>
<dd>
<h3>
<a href="#">信息披露</a>
</h3>
</dd>
<dd>
<h3>
<a href="#">湾主码头</a>
</h3>
<ul class="aui-nav-list">
<li>
<a href="#">金融论坛</a>
</li>
<li>
<a href="#">积分商城</a>
</li>
</ul>
</dd>
</dl>
</div>
<div class="aui-nav-right">
<a href="#">个人中心</a>
</div>
</div>
</div>
<div class="aui-banner-box">
<div class="aui-banner-slide">
<div class="hd aui-banner-circle">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd aui-banner-body">
<ul>
<li>
<a href="#" class="aui-banner-body-bg01"></a>
</li>
<li>
<a href="#" class="aui-banner-body-bg02"></a>
</li>
<li>
<a href="#" class="aui-banner-body-bg03"></a>
</li>
<li>
<a href="#" class="aui-banner-body-bg04"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="aui-background">
<p>*预期收益并非平台承诺收益,市场有风险,投资需谨慎</p>
</div>
<div class="aui-list-item">
<div class="aui-list-wrap">
<ul>
<li>
<div class="aui-list-wrap-box">
<h2>
<img src="images/icon1.png" alt="">财富管理
</h2>
<p>
<a href="#">MM计划</a>
<a href="#">财富岛</a>
</p>
<p>
<a href="#">M+计划</a>
<a href="#">XX包</a>
</p>
</div>
</li>
<li>
<div class="aui-list-wrap-box">
<h2>
<img src="images/icon2.png" alt="">贷款
</h2>
<p>
<a href="#">个人信贷</a>
<a href="#">股票质押</a>
</p>
<p>
<a href="#">高管信用贷</a>
<a href="#">房产贷款</a>
</p>
</div>
</li>
<li>
<div class="aui-list-wrap-box">
<h2>
<img src="images/icon3.png" alt="">融资租赁
</h2>
<p>
<a href="#">自助贩卖机</a>
</p>
</div>
</li>
<li>
<div class="aui-list-wrap-box">
<h2>
<img src="images/icon4.png" alt="">湾主码头
</h2>
<p>
<a href="#">积分商城</a>
<a href="#">JR兑换</a>
</p>
<p>
<a href="#">JR抽奖</a>
</p>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".aui-banner-slide").slide({
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
trigger: "click",
delayTime: 1000
});
jQuery(".aui-comm-box").slide({
type: "menu",
titCell: "dd",
targetCell: "ul",
delayTime: 0,
defaultPlay: false,
returnDefault: true
});
</script>