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>