最近要用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. 車(rook)

    [题目分析] JustPenz:我们假设n>m(不大于就交换),那最多能摆m个,所以会有(n-m)个空白,我们把这些空白插入到n中,答案就是C(n,n-m)=C(n,m);数据范围比较大,我们就 ...

  2. HierarchyViewer for iOS 2.0 BETA Introduction

    We know HierarchyViewer is an useful tool in Android SDK. The developer and tester, who haven't the ...

  3. 从零开始学iPhone开发（4）——使用WebView

    转自 总结关于iPhone中UIWEBVIEW读取本地GBK编码格式html 关于webView读取本地GBK编码的html,尝试了两天,终于成功. 欢喜之余,把感想记下来.一般来说,不成都是人犯错, ...

  4. [HIHO1062] 最近公共祖先·一（lca, 并查集, 二分, 神trick）

    题目链接:http://hihocoder.com/problemset/problem/1062 题意裸,有个trick,导致我当年做的时候一直在WA... 那就是出现这种没有出现在关系中,但是依然 ...

  5. 理解JS回调函数

    我们经常会用到客户端与Web项目结合开发的需求,那么这样就会涉及到在客户端执行前台动态脚本函数,也就是函数回调,本文举例来说明回调函数的过程. 首先创建了一个Web项目,很简单的一个页面,只有一个bu ...

  6. Scrum Meeting 10-20151216

    任务安排 姓名 今日任务 明日任务 困难 董元财 网络连接框架优化 网络连接框架优化 无 胡亚坤 优化商品搜索界面 优化商品搜索界面 无 刘猛 请假(参加编译测试) 无 马汉虎 请假(参加编译测试) ...

  7. Nginx模块之————RTMP模块在Ubuntu 14.04年的设置与搭建

    Nginx的设置,RTMP在Ubuntu 14.04 https://www.vultr.com/docs/setup-nginx-rtmp-on-ubuntu-14-04

  8. redis 在32位系统安装以及使用

    1.下载32位redis文件. http://pan.baidu.com/s/1eRIZPAE 我下载后的路径是:E:\Redis\Redis 里面的文件如图:  2.调取命令窗口 win+R,输入命 ...

  9. golang 文件读取

    Golang 的文件读取方法很多,刚上手时不知道怎么选择,所以贴在此处便后速查. 一次性读取 小文件推荐一次性读取,这样程序更简单,而且速度最快. 复制代码 代码如下: func ReadAll(fi ...

  10. 项目中关于ajax jsonp的使用

    项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() {    $.ajax({       ...