一、遇问题：
产品说：“最近需要弄个活动发到朋友圈中，我把设计图发给你”
产品说：“有6张设计图，我要上下滑动翻页，都要放在一个页面中啊，还有里面图片要能动！要炫酷！，在加一个背景音乐哦”
我（吊炸天，炫酷的，真是折磨人）：“好”
产品：“加油！”
经理：“ 1”
老板：“ 1”
二、解决思路：
1.要炫酷，要花里胡哨，自己写估计要耗电时间，算了，找插件吧
2.滑动翻页：为了保证用户体验，不会再去加载下一页，自己放到一个页面，所以每个页面放到一个DIV中，通过滑动来显示指定DIV
2.动画效果:自己使用CSS插件：animate
三、伪代码
html
<div class="swiper-container" id="swiper-container-v"> <section class="poster_wrap load" id="load"> <div class="p_loading"> <div class="p_loading_logo"></div> <p class="p_loading_tip">加载页</p> </div> </section> <div class="swiper-wrapper"> <!-------------slide1-----------------> <section class="swiper-slide swiper-slide1 swiper-slide-v"> <div class="index-top ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s"> <h1>这是第一页</h1> </div> </section> <!-------------slide2-----------------> <section class="swiper-slide swiper-slide2 swiper-slide-v"> <h1 class="posit_tit"><i class="about_us_tit_ico"></i>这是第二页</h1> <div class="swiper-container ani" id="swiper-container-h" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s"> <div class="swiper-wrapper"> <div class="swiper-slide slide1"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二页中的第1页</h3> </div> <div class="job_details"> <span class="job_address">page1</span> </div> </div> <div class="swiper-slide slide2"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二页中的第2页</h3> </div> <div class="job_details"> <span class="job_address">page2</span> </div> </div> <div class="swiper-slide slide3"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二页中的第3页</h3> </div> <div class="job_details"> <span class="job_address">page3</span> </div> </div> </div> </div> </section> </div> <!--向上箭头--> <div class="arrow-box"> <img src="http://img.studyofnet.comimages/arrow.png" id="array"> </div> </div>
四、解析
使用到的是swiper插件做滑动翻页，一般做活动广告宣传发到朋友圈，简单上手，有炫酷。
五、地址
[演示地址](http://47.105.36.188:3030/toutiao/Swiper上下滑动翻页面带背景音乐/index.html)
[源代码下载](http://github.com/harryluo163/toutiao/tree/master/Swiper上下滑动翻页面带背景音乐)
