《H5宣傳頁面》介紹（一）

做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>

然後根據這模板寫各頁面：

寫上js：

（二）音樂圖示效果設定：

放入靜態圖片：

放入音樂連結：

寫js控制音樂點選暫停再點選播放：

音樂圖示旋轉動畫：

（三）箭頭上下搖動

以上先介紹h5宣傳頁大致的架構和使用的框架，往後繼續介紹頁面元素和動畫設定等等，若說的有不當，請大神糾正和指導，最後祝願大家心想事成，事事順心!

附上《H5宣傳網頁demo》github地址：https://github.com/lilyping/H5-animate-

本文作者lilyping
越努力，越幸運
原文連結：https://www.jianshu.com/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos原始碼地址：https://github.com/lilyping