背景需求 给业务部分在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 
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7.     <meta name="format-detection" content="telephone=no"/>
  8.  
  9.     <link rel="stylesheet" href="idangerous.swiper.css">
  10.     <script type="text/javascript" src="idangerous.swiper-2.1.min.js"> </script>
  11.     <style type="text/css">
  12.  
  13.         .swiper-container, .swiper-slide {
  14.             width: 500px;
  15.             height: 200px;
  16.         }
  17.     </style>
  18.     <script type="text/javascript">
  19.  
  20.          window.onload = function() {
  21.                 var mySwiper = new Swiper('.swiper-container',{
  22.                      //添加需要的选项:
  23.                             mode:'horizontal',
  24.                     loop: true
  25.                 //等等..
  26.                });
  27.         };
  28.  
  29.          </script>
  30.  
  31. </head>
  32. <body>
  33.  
  34. <div class="swiper-container">
  35.       <div class="swiper-wrapper">
  36.           <!--First Slide-->
  37.           <div class="swiper-slide" style="height:667px; background-color: aqua">
  38.             <!-- 这里添加第一个HTML内容 -->
  39.               第一帧
  40.           </div>
  41.           <!--Second Slide-->
  42.           <div class="swiper-slide" style="height:667px; background-color: bisque">
  43.             <!--  这里添加第二个HTML内容 -->
  44.               第二帧
  45.            </div>
  46.            <!--Third Slide-->
  47.            <div class="swiper-slide" style="height:667px; background-color: bisque">
  48.              <!--  这里添加第三个HTML内容 -->
  49.                第三帧
  50.            </div>
  51.            <!--Etc..-->
  52.        </div>
  53.      </div>
  54. </body>
  55. </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. python 基础——多重继承

    原始的初始化 子类直接调用超类 __init__ 方法初始化,当形成钻石继承的时候,超类会被多次初始化,可能会有意向不到的问题: BaseClass /        \ OneClass    Tw ...

  2. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. POJ 2516 Minimum Cost 最小费用流

    题目: 给出n*kk的矩阵,格子a[i][k]表示第i个客户需要第k种货物a[i][k]单位. 给出m*kk的矩阵,格子b[j][k]表示第j个供应商可以提供第k种货物b[j][k]单位. 再给出k个 ...

  4. UIScrollView的相关属性说明

    _scrollView = [[UIScrollView alloc] init]; //height = 0:禁止垂直方向滚动 _scrollView.contentSize = CGSizeMak ...

  5. SVG之初识

    什么是SVG? 也许现在很多人都听说过SVG的人比较多,但不一定了解什么是SVG:SVG(Scalable Vector Graphics 一大串看不懂的英文)可伸缩矢量图形,它是用XML格式来定义用 ...

  6. HTML之背景颜色的改变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. lua技巧分享之保护执行

    我们在c#/c++里为了防止调用出现异常的时候程序可以正常的执行,经常使用try{}catch{}的结构, 那么,语言简单的lua是怎么做到的呢?答案就在pcall 先简单的介绍一下这个函数: --尝 ...

  8. 基于系统的UIMenuController的使用及自定义UIMenuItem

    1.前言 在开发中 UIMenuController 用得较少,偶尔遇到了,一时竟想不起来,因此做个回顾 2.系统默认支持 UIMenuController 的UI控件 UITextField UIT ...

  9. WPF密码框中禁止复制、粘贴

    如题: " Margin="215,32,151,0" > <PasswordBox.CommandBindings> <CommandBindi ...

  10. 6款基于SVG的HTML5应用和动画

    1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...