最近要用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. [Scrapy] Mac安装Scrapy

    Mac安装Scrapy Mac版本 10.11 El Captain. 前一段想在Mac上用Scrapy,各种问题.有一个不错的工具:Anaconda. 安装Anaconda 下载地址 我还是下pyt ...

  2. WebForm带有图片的验证码

    验证码形成的部分在一个aspx文件中: 页面设置 <%@ Page Language="C#" AutoEventWireup="true" CodeFi ...

  3. Python3基础 index 返回一个元素在列表中第一次出现的索引值

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. SVN错误及处理

    SVN无法读取current修复方法 Can't read file : End of file found 文件:repository/db/txn_current.repository/db/cu ...

  5. 解决GitLab提交MergeRequest时，提示502 GitLab is not responding.的问题

    最近使用GitLab提交MergeRequest时,提示502 GitLab is not responding. 使用gitlab-ctl tail查看错误信息如下: 2014/10/28 11:5 ...

  6. C#报修系统Ⅱ

    用户需求: 1.用户可以注册,可以登录. 2.需要一个报修界面,当点击“报修”按钮时,软件会把用户报修的信息保存起来,更新报修次数,同时会清空相应的文本框,软件还要要检查所有文本框是否为空,空的话给出 ...

  7. CentOS 7系统挂载NTFS分区的移动硬盘（转载及体验 CentOS6.5系统挂载NTFS分区的移动硬盘）

    作为IT的工作者,避免不了使用Linux系统,我比较喜欢CentOS,为了锻炼自己对CentOS的熟练操作,就把自己的笔记本装了CentOS,强制自己使用,使自己在平时的工作中逐渐掌握Linux的学习 ...

  8. $.ajax()常用方法详解(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数 ...

  9. 利用反射和ResultSetMetaData实现DBUtils的基本功能

    DBUtils大大简化了JDBC的书写,极大的提高了开发效率,和数据库连接池一起,简化了JDBC开发的流程.简易的自定义数据库连接池可以通过装饰者设计模式和动态代理模式得到很简单的实现,那么DBUti ...

  10. setColorFilter()滤镜

    ----------转载于:http://blog.sina.com.cn/s/blog_5da93c8f01012pkj.html 通过setColorFilter可以实现滤镜效果. 如:     ...