背景需求 给业务部分在m站实现一个邀请函的h5页面，基本流程：1.会议主题，2邀请函内容，3会议安排，4会议网络资源二维码，5酒店安排
技术分析

将ppt搬到h5上，每一页要用帧显示（这个没有用过）、每一项用加载效果 淡入淡出等、增加音乐效果、增加翻页提示箭头图标
Swiper

官网 http://www.swiper.com.cn/

了解Swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

http://www.html5jq.com/fe/javascript_jQuery/20141114/3.html
demo 
<!doctype html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <meta name="format-detection" content="telephone=no"/>

    <link rel="stylesheet" href="idangerous.swiper.css">

    <script type="text/javascript" src="idangerous.swiper-2.1.min.js"> </script>

    <style type="text/css">

        .swiper-container, .swiper-slide {

            width: 500px;

            height: 200px;

        }

    </style>

    <script type="text/javascript">

         window.onload = function() {

                var mySwiper = new Swiper('.swiper-container',{

                     //添加需要的选项:

                            mode:'horizontal',

                    loop: true

                //等等..

               });

        };

         </script>

</head>

<body>

<div class="swiper-container">

      <div class="swiper-wrapper">

          <!--First Slide-->

          <div class="swiper-slide" style="height:667px; background-color: aqua">

            <!-- 这里添加第一个HTML内容 -->

              第一帧

          </div>

          <!--Second Slide-->

          <div class="swiper-slide" style="height:667px; background-color: bisque">

            <!--  这里添加第二个HTML内容 -->

              第二帧

           </div>

           <!--Third Slide-->

           <div class="swiper-slide" style="height:667px; background-color: bisque">

             <!--  这里添加第三个HTML内容 -->

               第三帧

           </div>

           <!--Etc..-->

       </div>

     </div>

</body>

</html>
总结

不需要依赖jquery

<link rel="stylesheet" href="idangerous.swiper.css">
  <script type="text/javascript" src="idangerous.swiper-2.1.min.js"> </script>

非常简单易用，  需要将功能扩展一下，如果在pc上翻页是需要加pc版的翻页效果

callback事件 是保证交互连续的重点

Swiper简单入门的更多相关文章

  1. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  4. emacs最简单入门，只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  5. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  6. Docker 简单入门

    Docker 简单入门 http://blog.csdn.net/samxx8/article/details/38946737

  7. Springmvc整合tiles框架简单入门示例（maven）

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  8. git简单入门

    git简单入门 标签(空格分隔): git git是作为程序员必备的技能.在这里就不去介绍版本控制和git产生的历史了. 首先看看常用的git命令: git init git add git comm ...

  9. 程序员，一起玩转GitHub版本控制，超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

随机推荐

  1. 关于Navicat Premium导入xlsx的问题

    这段时间由于工作需要,频繁通过Oracle导入/导出大量数据,测试了很多软件,都不理想.PL/SQL Developer导入.导出都卡死:Oracle SQL Developer也是导入.导出都卡的半 ...

  2. springmvc(1)--配置

    最近把spring的使用整理下,版本4.1.1.RELEASE SpringMVC是一个基于DispatcherServlet的MVC框架,每一个请求先访问的都是DispatcherServlet,D ...

  3. dfa最小化，终于完成了。

    采取的方法是hopcroft的填表法,详情见如下代码 #include "nfa_to_dfa.h" int* dfa_diff_matrix; int mini_dfa_numb ...

  4. 最初步的正则表达式引擎:生成nfa

    这个版本修改了前面版本的两个个bug. 第一个:识别到字符集的时候,只是将name_number加1,却并不对reg_pattern_table[name_number]进行初始化. 第二个:识别到假 ...

  5. Angularjs 使用filter格式化输出href

    工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | ...

  6. HTML常见标签

    标题:h1.h2.h3.h4.h5.... 段落:p 换行:br 容器:div.span(用来容纳其他标签) 表格:table.tr.td 列表:ul.ol.li 图片:img 表单:input 链接 ...

  7. 熔断器设计模式<转>

    熔断器设计模式 如果大家有印象的话,尤其是夏天,如果家里用电负载过大,比如开了很多家用电器,就会”自动跳闸”,此时电路就会断开.在以前更古老的一种方式是”保险丝”,当负载过大,或者电路发生故障或异常时 ...

  8. php中使用PHPExcel操作excel(xls)文件

    读取中文的xls.csv文件会有问题,网上找了下资料,发现PHPExcel类库好用,官网地址:http://phpexcel.codeplex.com/ 1.读取xls文件内容  代码如下 复制代码 ...

  9. 读书笔记-UIView与控件

    1.UIView 在Objective-C中,NSObject是所有类的“根”类.同样,在UIKit框架中,也存在一个如此神奇的类UIView.从继承关系上看,UIView是所有视图的根. 1.1.U ...

  10. IOS版应用商店应用源码

    app商店 swift版 用swift编写的 应用商店 支持iPad iPhone利用了ios8过渡动画 支持横竖屏操作 源码下载: http://code.662p.com/view/11384.h ...