Swiper简单入门

2024-09-21 07:31:04

背景需求	给业务部分在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事件是保证交互连续的重点

最新文章

热门文章