最近要用html5制作可以一屏一屏向上滑动的页面，发现大家使用swiper插件的较多，所以试了试，发现做出来的效果还不错，喜欢的朋友可以参考一下自己动手做啦。

1、首先我们要引入4个文件：

<head>

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

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

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

　　<script src="js/swiper.animate.min.js"></script>

</head>

可以直接去官网下载 http://www.swiper.com.cn//

2、主体部分

<body>

　　<div class="swiper-container">

　　　　<div class="swiper-wrapper">

　　　　<!-------------slide1----------------->

　　　　<section class="swiper-slide swiper-slide1">

　　　　　　<div class="ani resize" style="width:208px;height:20px;margin:0auto;left:0;right:0;top:100px;z-index:3;"swiper-animate-effect="slideInLeft"swiper-animate-duration="1.5s"swiper-animate-delay="0s" >美丽心灵</div>

　　    </section>

        <!---------------slide2-------------->

        <section class="swiper-slide swiper-slide2">

        </section>

        <!----------------slide3-------------->

        <section class="swiper-slide swiper-slide3">

        </section>

    </div>

</div>

</body>
                       
其中 wiper-animate-effect是你想要的动画效果，swiper提供了很多，下一章我会一一列出来供大家参考。
swiper-animate-duration 动画执行的时间
swiper-animate-delay动画的延迟时间
最后给大家一个实例，动手做一下就会了~
http://pan.baidu.com/s/1i3xjHPV

swiper的使用的更多相关文章

  1. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  2. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  3. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  4. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  5. swiper框架，实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  6. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  7. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. swiper横向轮播（兼容IE8）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Swiper说明&&API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  10. Swiper 中文API手册（share）

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

随机推荐

  1. lievent源码分析：evbuffer

    struct evbuffer定义在evbuffer-internal.h文件中. evbuffer结构内部保存一个以evbuffer-chain结构为节点的链表,evbuffer内部有两个分别指向首 ...

  2. IntelliJ IDEA14 配置 SVN

    最新升级IDEA13到14版本,升级后发现IDEA中SVN无法正常使用,但文件夹下能够正常使用. 并且报错:svn: E204899: Cannot run program "svn&quo ...

  3. jquery.validate使用 - 2

    jQuery.validate.js API说明 参考http://ideabean.javaeye.comPlugin methods Name Type validate( options ) R ...

  4. 使用phantomjs操作DOM并对页面进行截图需要注意的几个问题

    phantomjs是一个无界面浏览器,可用于网页截图和前端自动化测试,基于webkit内核(也就是chrome使用的内核),并使用js编写业务脚本来请求.浏览和操作页面.最近前端监控需要用到phant ...

  5. PCL点云库：Kd树

    Kd树按空间划分生成叶子节点,各个叶子节点里存放点数据,其可以按半径搜索或邻区搜索.PCL中的Kd tree的基础数据结构使用了FLANN以便可以快速的进行邻区搜索.FLANN is a librar ...

  6. SQL Server 查询表的记录数(3种方法，推荐第一种)

    http://blog.csdn.net/smahorse/article/details/8156483 --SQL Server 查询表的记录数 --one: 使用系统表. SELECT obje ...

  7. 深入浅出设计模式——中介者模式（Mediator Pattern）

    模式动机 在用户与用户直接聊天的设计方案中,用户对象之间存在很强的关联性,将导致系统出现如下问题: 系统结构复杂:对象之间存在大量的相互关联和调用,若有一个对象发生变化,则需要跟踪和该对象关联的其他 ...

  8. 《BI项目笔记》无法解密受保护的 XML 节点“DTS:Password” 解决办法

    说明: 无法解密受保护的 XML 节点“DTS:Password”,错误为 0x8009000B“该项不适于在指定状态下使用.”.可能您无权访问此信息.当发生加密错误时会出现此错误.请确保提供正确的密 ...

  9. iOS - C 基本语法

    1.数据类型 2.常量 1)凡是整数数字常量一律是 int 型. 2)typedef 和 define. typedef 定义类型, #define 只是字符串替换. 3)在编写整形常量时,可以在常量 ...

  10. jQuery之元素操作及事件绑定

    1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ...