swiper.js基于animate动画库制作阿里云官网顶部导航菜单和banner图片切换结合布局代码。
使用方法
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/swiper.min.css" /> <link rel="stylesheet" type="text/css" href="statics/css/animate.min.css" /> <link rel="stylesheet" type="text/css" href="statics/css/style.css" />2、head引入js文件
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script src="statics/js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>3、body引入HTML代码
<div class="top"> <div class="bar"> <div class="logo"> <img src="statics/images/logo.png" /> </div> <div class="bar_menu"> <ul> <li> <a href="#"><i></i> 购物车</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> </div> <div class="area"> <span>中国站 <i></i></span> <ul> <li> <a href="#"> <span class="nav-site">中国</span> <span class="nav-lang">简体中文</span> </a> </li> <li> <a href="#"> <span class="nav-site">International</span> <span class="nav-lang">English</span> </a> </li> <li> <a href="#"> <span class="nav-site"></span> <span class="nav-lang">简体中文</span> </a> </li> <li> <a href="#"> <span class="nav-site"></span> <span class="nav-lang">한국어</span> </a> </li> <li> <a href="#"> <span class="nav-site"></span> <span class="nav-lang">繁體中文</span> </a> </li> <li> <a href="#"> <span class="nav-site"></span> <span class="nav-lang">Deutsch</span> </a> </li> <li> <a href="#"> <span class="nav-site"></span> <span class="nav-lang">Français</span> </a> </li> <li class="line"></li> <li> <a href="#"> <span class="nav-site">Australia</span> <span class="nav-lang">English</span> </a> </li> <li> <a href="#"> <span class="nav-site">Malaysia</span> <span class="nav-lang">English</span> </a> </li> <li> <a href="#"> <span class="nav-site">Singapore</span> <span class="nav-lang">English</span> </a> </li> <li> <a href="#"> <span class="nav-site">United States</span> <span class="nav-lang">English</span> </a> </li> <li> <a href="#"> <span class="nav-site">中國香港</span> <span class="nav-lang">繁體中文</span> </a> </li> <li> <a href="#"> <span class="nav-site">中國台灣</span> <span class="nav-lang">繁體中文</span> </a> </li> <li> <a href="#"> <span class="nav-site">日本</span> <span class="nav-lang">日本語</span> </a> </li> </ul> </div> <div class="search"> <input type="text" name="keyword" placeholder="ECS" /> <div class="search_icon"></div> </div> </div> <div class="nav"> <ul> <li> <a href="#">最新活动</a> </li> <li> <a href="#">产品</a> </li> <li> <a href="#">解决方案</a> <div class="son"> <div class="list"> <h4 class="title">通用解决方案</h4> <p> <a href="#">网站</a> </p> <p> <a href="#">IPv6<i>NEW</i></a> </p> <p> <a href="#">企业互联网架构</a> </p> <p> <a href="#">网络<i>NEW</i></a> </p> <p> <a href="#">云存储</a> </p> <p> <a href="#">迁移</a> </p> <p> <a href="#">区块链<i>HOT</i></a> </p> <p> <a href="#">SAP 云</a> </p> <p> <a href="#">VMware 云<i>NEW</i></a> </p> <p> <a href="#">智能客服</a> </p> <p> <a href="#">AIOps故障管理</a> </p> <p> <a href="#">企业效能</a> </p> <p> <a href="#">容器服务深度学习</a> </p> <p> <a href="#">数据传输</a> </p> <p> <a href="#">数据库灾备</a> </p> <p> <a href="#">企业级分布式数据库<i>NEW</i></a> </p> <p> <a href="#">可信数字内容版权服务<i>NEW</i></a> </p> <p> <a href="#">移动研发平台</a> </p> <p> <a href="#">钉钉小程序</a> </p> <p> <a href="#">短视频</a> </p> </div> <div class="list"> <h4 class="title">行业解决方案</h4> <p> <a href="#">新零售<i>HOT</i></a> </p> <p> <a href="#">新金融</a> </p> <p> <a href="#">新制造</a> </p> <p> <a href="#">新能源</a> </p> <p> <a href="#">新技术</a> </p> <p> <a href="#">智能工业</a> </p> <p> <a href="#">大游戏</a> </p> <p> <a href="#">大视频</a> </p> <p> <a href="#">大传媒</a> </p> <p> <a href="#">大健康</a> </p> <p> <a href="#">大政务<i>HOT</i></a> </p> <p> <a href="#">体育</a> </p> <p> <a href="#">交通物流</a> </p> <p> <a href="#">教育</a> </p> <p> <a href="#">房地产</a> </p> <p> <a href="#">汽车</a> </p> </div> <div class="list"> <h4 class="title">安全解决方案</h4> <p> <a href="#">等保合规安全</a> </p> <p> <a href="#">新零售安全</a> </p> <p> <a href="#">政务云安全</a> </p> <p> <a href="#">互联网金融安全</a> </p> <p> <a href="#">游戏安全</a> </p> <p> <a href="#">社交/媒体spam</a> </p> <p> <a href="#">混合云态势感知</a> </p> </div> <div class="list"> <h4 class="title">大数据解决方案</h4> <p> <a href="#">智慧场馆<i>NEW</i></a> </p> <p> <a href="#">智能设备搜索</a> </p> <p> <a href="#">大数据仓库</a> </p> <p> <a href="#">云上数据集成</a> </p> <p> <a href="#">台风路径分析</a> </p> <p> <a href="#">工业大数据服务</a> </p> <p> <a href="#">企业数据服务</a> </p> <p> <a href="#">智能旅游</a> </p> <p> <a href="#">手机数据</a> </p> <p> <a href="#">VR应用开发</a> </p> </div> </div> </li> <li> <a href="#">定价</a> </li> <li> <a href="#">ET大脑</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> <a class="register" href="#">免费注册</a> </div> <div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide blue-slide" style="background: #3857AD;"> <img src="statics/images/banner1.jpg" swiper-animate-effect="fadeInUp" class="ani" /> </div> <div class="swiper-slide blue-slide" style="background: #24282c;"> <img src="statics/images/banner2.jpg" swiper-animate-effect="fadeInUp" class="ani" /> </div> <div class="swiper-slide blue-slide" style="background: #24282c;"> <div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> <h1>表格存储TableStore 升级发布会</h1> <p>更加灵活的查询能力与数据实时消费通道</p> <a href="#">了解更多-></a> </div> <img src="statics/images/banner3_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" /> </div> <div class="swiper-slide blue-slide" style="background: #24282c;"> <div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> <h1>Cloud Toolkit 全新升级支持 RDS MySQL</h1> <p>插件自动化部署，大幅提升开发部署效率</p> <a href="#">了解更多-></a> </div> <img src="statics/images/banner4_bg.png" swiper-animate-effect="fadeInUp" class="ani" /> </div> <div class="swiper-slide blue-slide" style="background: #24282c;"> <div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> <h1>消息队列（MQ ）全产品线升级</h1> <p>发布AMQP，兼容开源RabbitMQ，支持HTTP协议，推出7种多语言客户端</p> <a href="#">了解更多-></a> </div> <img src="statics/images/banner5_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" /> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div class="recommend"> <ul> <li> <a href="#"> <h2>云服务器特惠</h2> <p>限时5折，降低采购和运维成本，助力中小企业成长</p> </a> </li> <li> <a href="#"> <h2>Hi购季特权</h2> <p>“按月付款+包年折扣”两者兼得，两成首付轻松上云</p> </a> </li> <li> <a href="#"> <h2>阿里云 IoT</h2> <p>《智造将来》传递科技温暖，智能人居平台助力养老科技</p> </a> </li> <li> <a href="#"> <h2>DataWorks流计算平台</h2> <p>支持DAG与SQL模式互相转换，可视化拖拽开发实时计算</p> </a> </li> <li> <a href="#"> <h2>MongoDB游戏解决方案</h2> <p>完备的部署形态，适配多种游戏架构</p> </a> </li> </ul> </div> </div> <script> var mySwiper = new Swiper('.swiper-container', { loop: true, effect: 'fade', pagination: { el: '.swiper-pagination', clickable: true, }, autoplay: { delay: 5000, //1秒切换一次 }, on: { init: function() { swiperAnimateCache(this); //隐藏动画元素 this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件 }, slideChangeTransitionEnd: function() { swiperAnimate(this); //每个slide切换结束时运行当前slide动画 } } }); </script>
