您的位置：首页 > Web前端 > CSS

swiper切换动画效果，需要先加载swiper.animate.min.js和animate.min.css。

2017-06-16 14:54 701 查看
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

        <link rel="stylesheet" type="text/css" href="css/index.css"/>

        <link rel="stylesheet" href="css/animate.min.css">

        <link rel="stylesheet" href="css/swiper-3.4.2.min.css">

        <script src="js/swiper-3.4.2.min.js"></script>       

        <script src="js/swiper.animate1.0.2.min.js"></script>   <!--引用animate.js和swiper.min.js需要先加载，放到head部分-->

        <title>移动端动画练习</title>

    </head>

    <body>

        <div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide">

                   <p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>

                </div>

                <div class="swiper-slide">

                   <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>

                </div>

                <div class="swiper-slide">

                   <p class="ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>

                </div>

            </div>

        </div>

        <script>

           var mySwiper = new Swiper ('.swiper-container', {

                  direction: 'vertical',

               onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

               swiperAnimateCache(swiper); //隐藏动画元素

               swiperAnimate(swiper); //初始化完成开始动画

             },

            onSlideChangeEnd: function(swiper){

            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

              }

           })

        </script>

        

    </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航