Swiper简单入门

时间：2023-03-08 16:57:53
背景需求 给业务部分在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事件 是保证交互连续的重点

相关文章