Swiper简单入门
| 背景需求 | 给业务部分在m站实现一个邀请函的h5页面，基本流程：1.会议主题，2邀请函内容，3会议安排，4会议网络资源二维码，5酒店安排 |
| 技术分析 |
将ppt搬到h5上，每一页要用帧显示（这个没有用过）、每一项用加载效果 淡入淡出等、增加音乐效果、增加翻页提示箭头图标 |
| Swiper |
官网 http://www.swiper.com.cn/
了解Swiper
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">
非常简单易用， 需要将功能扩展一下，如果在pc上翻页是需要加pc版的翻页效果
callback事件 是保证交互连续的重点 |
