最近要用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. 如何使用R语言解决可恶的脏数据

    转自:http://shujuren.org/article/45.html 在数据分析过程中最头疼的应该是如何应付脏数据,脏数据的存在将会对后期的建模.挖掘等工作造成严重的错误,所以必须谨慎的处理那 ...

  2. Jenkins RCE2（CVE-2016-0788）EXP

    国内应该有这个EXP的不多,需要点JAVA基础,安装好maven之后,配置下就可以了,官网也给出了样例,乌云也给了分析.

  3. Key Figure、Exception Aggreagion、Non-Cumulative KeyFigure

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. Redis - 发布和订阅

    一.概述 1). 发布和订阅是一种消息通信模式. 2). 优点:使消息订阅者和消息发布者耦合度降低,类似设计模式中的观察者模式. 二.发布和订阅 订阅命令: // 订阅一个或多个频道 // 返回值:v ...

  5. 描述Linux运行级别0-6的各自含义

    中文: 0: 关机模式 1:单用户模式<==破解root密码 2:无网络支持的多用户模式 3:有网络支持的多用户模式(文本模式,工作中最长使用的模式) 4:保留,未使用 5:有网络支持又x-wi ...

  6. (六)makefile编程

    最简单的makefile: all: gcc server.c -o ser gcc client.c  -o cli clear: rm ser cli *.o -rf  #rm -rf表示删除文件 ...

  7. 《高级Web应用程序设计》课程学习资料

    任务1:什么是ASP.NET MVC 1.1  ASP.NET MVC简介 1.2 认识ASP.NET MVC项目结构 1.3 ASP.NET MVC生命周期 任务2:初识ASP.NET MVC项目开 ...

  8. Monkey环境配置

    安卓APP想要测试稳定性,monkey是最佳选则. 首先搭建monkey的运行环境 在Windows下基于SDK 1.下载SDK for Windows 解压:android-sdk-windows ...

  9. C:上台阶

    总时间限制: 1000ms 内存限制: 65536kB描述楼梯有n(100 > n > 0)阶台阶,上楼时可以一步上1阶,也可以一步上2阶,也可以一步上3阶,编程计算共有多少种不同的走法. ...

  10. 当BPM业务流程管理遇上制造业

    2015年5月,K2正式与赛科利签约,准备上线核心采购类流程,包括PR.PO.Payment.供应商管理等. 上海赛科利汽车模具技术应用有限公司隶属于上汽集团,现有员工2300余人.为解决汽车“安全” ...