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

<!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>

//这个地方的初始化工作是在一起进行的 ，同时引入swiper.js 和animate.js两个文件 在官方的网站中有说明的。附上图片
        <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>

本文的例子就是同时引入2个，所以初始化工作是在一起进行的

附上另外一个链接 http://www.imqiyu.com/web/38.html

swiper.js插件的使用的更多相关文章

  1. iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                      上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...

  2. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  4. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

  5. 前端插件--swiper.js

    使用swiper.js还要注意引入它的同时也要引入swiper.css样式文件: swiper官方文档:http://www.swiper.com.cn/api/effects/193.html 实例 ...

  6. 前端JS插件整理

    1.JQuery.js JavaScript 库,简化JS. 官网地址:https://jquery.com/ 菜鸟教程:http://www.runoob.com/jquery/jquery-tut ...

  7. Swiper.js使用教程

    官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...

  8. 全屏使用swiper.js过程中遇到的坑

    概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...

  9. 前端技术-js插件

    学习良好的规范,培养良好的书写习惯,苦练基本功才能快速成长. http://www.cnblogs.com/cssbbs/category/758479.html 常用插件 插件名 使用范围 说明 官 ...

随机推荐

  1. mysql语句:SET NAMES UTF8

    一直以来只知道mysql_query("SET NAMES UTF8");是设定数据库编码的,但是一直不清楚“SET NAMES UTF8”是什么. 直到今天才知道 SET NAM ...

  2. js之substr和substring的差别

    今天有人在群里问这两个的差别,借这个机会在这罗列下 substring(from,to) 開始和结束的位置,从零開始的索引 參数     描写叙述 from     必需. 一个非负的整数,规定要提取 ...

  3. 理解yarn平台，理解万岁，肤浅理解也万岁~

    从Hadoop1到Hadoop2很大程度上解放了Jobtracker资源调度的问题,这就得多亏了yarn平台了.我知道的,除了我们的大豆瓣用的是Mesos,咱们国家可以说应该是99.99%都使用的是y ...

  4. Docker and Go: why did we decide to write Docker in Go?

    Docker and Go: why did we decide to write Docker in Go? | Hacker News https://news.ycombinator.com/i ...

  5. luogu3379 【模板】最近公共祖先(LCA) 倍增法

    题目大意:给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 整体步骤:1.使两个点深度相同:2.使两个点相同. 这两个步骤都可用倍增法进行优化.定义每个节点的Elder[i]为该节点的2^k( ...

  6. 微信的API都是通过https调用实现的，分为post方法调用和get方法调用。不需要上传数据的采用get方法（使用IntraWeb开发）

    首先需要明确的是,微信的API都是通过https调用实现的,分为post方法调用和get方法调用.不需要上传数据的采用get方法(例如获取AccessToken),而需要向微信服务器提交数据的采用po ...

  7. python数据分组运算

    摘要: pandas 的 GroupBy 功能可以方便地对数据进行分组.应用函数.转换和聚合等操作.   # 原作者:lionets GroupBy 分组运算有时也被称为 “split-apply-c ...

  8. Oracle：datafile删除后，重启server报ORA-01110

    模拟实验: 创建一个表空间后,直接把数据文件删除了:然后重启server. 1. create tablespace w56 datafile '/u01/app/oracle/product/10. ...

  9. ubuntu IP 扫描

    /******************************************************************************* * ubuntu IP 扫描 * 说明 ...

  10. Servlet分页查询

    分页查询: 1.逻辑分页查询:用户第一次访问时就把全部数据访问出来,添加到一个大集合中,然后放到session中,进行转发.通过页码等的计算,把要显示的内容添加到一个小集合中,转发.遍历小集合以显示当 ...