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-top"> <div class="aui-header-title"> <div class="aui-title"> <a href="#">云服务</a> </div> <ul class="navList"> <li> <a href="#">云计算基础服务</a> </li> <li> <a href="#">云安全计算服务</a> </li> <li> <a href="#">通信与视频</a> </li> <li> <a href="#">云计算服务</a> </li> </ul> </div> </div> <div class="aui-header-nav moveDown"> <div class="wrapper"> <a href="#"> <div class="aui-logo"> <h1>首页</h1> </div> </a> <div class="aui-top-nav"> <ul class="menu"> <li class="product"> <a href="#"> 产品 <span class="u-icon-caret"></span> </a> <div class="panel product"> <div class="inner"> <dl class="list"> <dt>客户服务云: </dt> <dd> <a href="#"> <i class="icon-font icon-font-item001"></i> <em class="txt">在线客服</em> </a> </dd> <dd> <a href="#"> <i class="icon-font icon-font-item002"></i> <em class="txt">机器人</em> </a> </dd> <dd> <a href="#"> <i class="icon-font icon-font-item003"></i> <em class="txt">呼叫中心</em> </a> </dd> <dd> <a href="#"> <i class="icon-font icon-font-item004"></i> <em class="txt">工单系统</em> </a> </dd> </dl> <dl class="list"> <dt>营销服务云: </dt> <dd> <a href="#"> <i class="icon-font icon-font-item005"></i> <em class="txt">营销服务</em> </a> </dd> </dl> <dl class="list"> <dt>场景支持: </dt> <dd> <a href="#"> <i class="icon-font icon-font-item006"></i> <em class="txt">移动办公</em> </a> </dd> <dd> <a href="#"> <i class="icon-font icon-font-item007"></i> <em class="txt">微信客服</em> </a> </dd> </dl> </div> </div> </li> <li class="finance"> <a href="#"> 解决方案 <span class="u-icon-caret"></span> </a> <div class="panel finance"> <div class="inner"> <dl class="list"> <dd style="margin-left: -405px;"> <a href="#"> <i class="icon-font icon-font-item001"></i> <em class="txt">互金解决方案</em> </a> </dd> </dl> </div> </div> </li> <li> <a href="#">案例 </a> </li> <li class="price"> <a href="#"> 价格 <span class="u-icon-caret"></span> </a> </li> <li class="service"> <a href="#">服务 </a> </li> <li class="merchants"> <a href="#">渠道合作 </a> </li> <li class="college"> <a href="#">轻学院 </a> </li> <li class="qa"> <a href="#"> 帮助 <span class="u-icon-caret"></span> </a> <div class="panel qa"> <div class="inner"> <dl class="list"> <dd> <a href="#"> <i class="icon-font icon-font-item002"></i> <em class="txt">帮助中心</em> </a> </dd> <dd> <a href="#"> <i class="icon-font icon-font-item003"></i> <em class="txt">下载</em> </a> </dd> <dd> <a href="#"> <i class="icon-font icon-font-item004"></i> <em class="txt">更新日志</em> </a> </dd> <dd> <a href="#"> <i class="icon-font icon-font-item005"></i> <em class="txt">开发指南</em> </a> </dd> </dl> </div> </div> </li> <li class="community"> <a href="#">博客</a> </li> </ul> </div> <div class="m-login"> <a href="#" class="u-btn sign">登录</a> <a href="#" class="u-btn free">免费试用</a> </div> </div> </div> <div class="aui-banner-slide"> <div class="aui-banner-main"> <div class="aui-banner-wrapper bd"> <ul> <li> <img src="images/banner001.png" alt=""> <div class="aui-banner-button"> <a href="#">立即试用</a> </div> </li> <li> <img src="images/banner002.png" alt=""> <div class="aui-banner-button"> <a href="#">立即试用</a> <a href="#" class="aui-btn-wh">了解详情</a> </div> </li> <li> <img src="images/banner003.png" alt=""> <div class="aui-banner-button"> <a href="#">立即成为代理</a> </div> </li> <li> <img src="images/banner004.png" alt=""> <div class="aui-banner-button aui-banner-button-mo"> <a href="#">成为合伙人</a> </div> </li> </ul> </div> <div class="hd aui-banner-circle"> <ul> <li class="on"></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="aui-banner-news"> <div class="aui-banner-news-box"> <ul> <li> <a href="#"> <div class="aui-bar-pic"> <img src="images/icon-bar001.png" alt=""> </div> <div class="aui-bar-head"> <p class="aui-bar-title">网易七鱼发布全新品牌视频</p> <p class="aui-bar-text">从服务抵达智慧营销未来</p> </div> </a> </li> <li> <a href="#"> <div class="aui-bar-pic"> <img src="images/icon-bar002.png" alt=""> </div> <div class="aui-bar-head"> <p class="aui-bar-title">营销服务云</p> <p class="aui-bar-text">助力企业营销，促进客户转化</p> </div> </a> </li> <li> <a href="#"> <div class="aui-bar-pic"> <img src="images/icon-bar003.png" alt=""> </div> <div class="aui-bar-head"> <p class="aui-bar-title">智能客服机器人</p> <p class="aui-bar-text">千亿级消息训练，97%应答准确率</p> </div> </a> </li> </ul> </div> </div> </div> <div style="height:1200px;"></div><!-- 可删除 --> <script type="text/javascript"> jQuery(".aui-banner-main").slide({ mainCell: ".bd ul", effect: "left", autoPlay: true, trigger: "click", delayTime: 700 }); $(window).on('scroll', function() { if ($(document).scrollTop() > 10) { $('.aui-header-nav').addClass('solid').removeClass('moveDown'); $('.aui-header-top').addClass('moveUp'); } else { $('.aui-header-nav').removeClass('solid').addClass('moveDown'); $('.aui-header-top').removeClass('moveUp'); } }); </script>
