我的第一篇博客---插件总结（一）

---

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Swiper Animate使用方法

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.引入css文件和JS文件

代码如下（示例）：

<link rel="stylesheet" href="./swiper-bundle.min.css">
<link rel="stylesheet" href="./animate.min.css">
<script src="./swiper-bundle.min.js"></script>
<script src="./swiper.animate1.0.3.min.js"></script>

2.创建轮播标签结构(建议复制插件demo中的结构) 并修改轮播内容

代码如下（示例）：

<div class="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="ani" swiper-animate-effect="fadeInDown" src="./img/1db4c77678ec4602a80b2c730217131a.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="tada" src="./img/325d30b845c0446dac80fcbaf105fed8.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="bounceOutDown" src="./img/789524d91a2145ca9352be72aa99579a.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="flipInY"   src="./img/ca6c4f201f0d47b486b56c1b42919b46.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="rotateIn"  src="./img/fefece13ee684dd9bbd462a49a09ee5e.jpeg" alt=""></div>
   </div>
   <!-- Add Pagination 指示器-->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
       </div>
   </div>

##第三步: 创建Swiper对象,并配置功能
代码如下（示例）：

var mySwiper = new Swiper ('.swiper-container', {
        // on 指展示功能, 需要设置为动画形式展示轮播的每一页
        
    }) 

##第四步:设置轮播图选项

 // 第一个参数是, 样式选择器, 对应轮播图最外层div
    // 第二个参数是, 轮播功能选项
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,  // 每次显示几页
      spaceBetween: 0,  // 两页之间的间隙
      loop: true,       // 无限循环
      pagination: {    //  轮播指示器
        el: '.swiper-pagination',  // 指向指示器父标签
        clickable: true,   // 是否可以点击指示器执行切换
      },
      navigation: {    // 设置轮播导航
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      autoplay:true,
      on:{
            // init 表示每一个将要展示之前的设置 (一般先隐藏这一页的动画内容)
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素 
                swiperAnimate(this); //初始化完成开始动画
            }, 
            // 当轮播的这一页展示出来时, 开始执行显示内容动画
            slideChangeTransitionEnd: function(){ 
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展现一次，去除ani类名
            } 
        }

---

总结

总结: 轮播动画展示步骤
1. 导入四个插件
2, 复制并修改轮播结构
3, 创建swiper对象并设置轮播功能和动画功能
4, 给需要做动画的标签添加对应的属性

2020-09-25第一次写自己的博客

一会我要赶十一点五十的班车，就长话短说了。今天是我第一次写我的博客，有这个想法很久了，却一直没有实现。都说万事开头难，既然我开头了，那我就一定要坚持下去，把我学到的东西及时总结到这里。今天可能时间有点仓促，下次一定要认真去总结规划。