JavaScript框架篇——SWIPER

什么是swiper?

Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

如何使用swiper

引入swiper对应的css和js文件
按照框架的需求搭建三层结构
创建一个Swiper对象, 将容器元素传递给它

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
</div>
<script>
    let mySwiper = new Swiper ('.swiper-container');
</script>

然后设置样式即可

swipe的高级使用

    let mySwiper = new Swiper ('.swiper-container', {
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 循环模式选项
        autoplay:true, // 自动轮播
        autoplay: {
            delay: 1000,//1秒切换一次
        },
        speed:5000, //设置切换速度//
    });

swipe的animation属性
在官方文档有详细的说明

div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!--
            swiper-animate-effect：切换效果，例如 fadeInUp
            swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
            swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
            -->
            <p class="ani" swiper-animate-effect="myFadeIn">内容</p>
        </div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素 
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        }
    });
</script>

同样可以通过类名修改样式和形状