《H5宣传页面》介绍（一）

image.png

做h5宣传页面，需要用到swiper框架，关于此框架，相信大部分读者们都了解过或者挺熟悉，不太了解的读者可以点击以下两个链接，分别大致了解下swiper2和swiper3：

swiper3（不兼容ie8）
http://www.swiper.com.cn/api/pagination/2016/0126/302.html

swiper2（兼容ie8）
http://2.swiper.com.cn/api/pagination/2014/1217/71.html

本人一般做h5宣传页面都用swiper3，下面介绍的项目都是用swiper3版本；

（一）利用swiper3框架里竖直方向切换页面效果：

首先引入这两个文件

<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/swiper.min.js"></script>

然后根据这模板写各页面：

Paste_Image.png

写上js：

Paste_Image.png

（二）音乐图标效果设置：

Paste_Image.png

放入静态图片：

Paste_Image.png

放入音乐链接：

Paste_Image.png

写js控制音乐点击暂停再点击播放：

Paste_Image.png

音乐图标旋转动画：

Paste_Image.png Paste_Image.png

（三）箭头上下摇动

Paste_Image.png Paste_Image.png


以上先介绍h5宣传页大致的架构和使用的框架，往后继续介绍页面元素和动画设置等等，若说的有不当，请大神纠正和指导，最后祝愿大家心想事成，事事顺心!

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping