最近要用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. 至强CPU性能排行，从X3210起，由低至高排列。

    X3210X3220E5410E5506X5355X3320E5507X5365E5-2603E3-1220LE5-2403E5607X3330L5506X3230L5420E5-2407W3520E ...

  2. 复旦高等代数 I（15级）思考题

    1.证明: 第三类分块初等变换是若干个第三类初等变换的复合. 特别地, 第三类分块初等变换不改变行列式的值. 2.设 $n\,(n\geq 2)$ 阶方阵 $A=(a_{ij}(x))$, 其中每个元 ...

  3. [问题2014A04] 解答

    [问题2014A04]  解答 (1) 由条件可得 \(AB+BA=0\), 即 \(AB=-BA\), 因此 \[AB=A^2B=A(AB)=A(-BA)=-(AB)A=-(-BA)A=BA^2=B ...

  4. [jetbrains系列] 外链第三方库+代码补全设置

    jetbrains系列的IDE真的是太好用了,有种相见恨晚的感觉. 在开发过程中第三方库是必不可少的,在开发的时候如果有一个可以补全的IDE可以节省查文档的时间. 举个例子:给pycharm配pysp ...

  5. Linux 远程桌面 访问 WIndows

    1. Debain 系列 linux sudo aptitude install rdesktop 2. Connect rdesktop <hostname> -r sound:off ...

  6. Centos7下搭建LAMP平台环境 (转载)

     1.启用Apache(httpd) Centos7默认已经安装httpd服务,只是没有启动.如果你需要全新安装,可以yum install -y httpd 启动服务:systemctl start ...

  7. JavaWeb基础: 获取资源文件

    Web工程在编译构建完毕以后,需要部署到Tomcat上运行,资源的硬盘路径也会随着改变.要想对资源文件进行读写操作需要获取其硬盘地址,在Web工程中通常通过ServletContext/ClassLo ...

  8. 并发编程 19—— 显式的Conditon 对象

    Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...

  9. springmvc__SimpleUrlHandlerMapping(对访问地址进行加工,以键值对的形式)

    1.配置web.xml(这里配置url-pattern为/) <!-- 编码过滤器 --> <filter> <filter-name>characterEncod ...

  10. Android中Webview使用自定义的javascript进行回调

    先说为什么需要讨论这个问题. 现在很多的手机应用,都可能会直接嵌入一个web页面.这样做的好处:一个是功能更新方便,维护起来容易,只需要维护服务器的页面即可,不需要更新客户端:另一个是功能通用,不仅a ...