【移动端】全屏上滑动下滑动插件效果

第一种方式：利用了（swiper.3.1.2.jquery.min.js）插件

如图：

JS代码为：

<script>
    var mySwiper3 = new Swiper('#swiper-container5', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical'
        //spaceBetween: 15
    })
    </script>

HTML代码为：（很多屏幕）

<div class="swiper-container" id="swiper-container5">
        <div class="swiper-wrapper">
        <!--第一屏 S-->
            <div class="swiper-slide">
                 <div class="page">
                      <div class="page-bg"></div>
                      <ul class="show-area">
                          <li class="ele-image ele_bg">
                              <div class="ele-animate fadeInNormal">
                                  <div class="ele-content"><img class="ele-detail" src="img/bg.jpg"></div>
                              </div>
                          </li>
                          <li class="ele-image ele_po1">
                              <div class="ele-animate fadeInNormal">
                                  <div class="ele-content"><img class="ele-detail" src="img/one_1.jpg"></div>
                              </div>
                          </li>
                          <li class="ele-image ele_po2">
                              <div class="ele-animate zoomIn">
                                  <div class="ele-content"><img class="ele-detail" src="img/one_2.png"></div>
                              </div>
                          </li>
                          <li class="ele-image ele_po3">
                              <div class="ele-animate fadeIn">
                                  <div class="ele-content"><img class="ele-detail" src="img/one_4.png"></div>
                              </div>
                          </li>
                          <li class="ele-image ele_po7">
                              <div class="ele-animate slideUp">
                                  <div class="ele-content"><img class="ele-detail" src="img/one_7.png"></div>
                              </div>
                          </li>
                          <li class="ele-image ele_po8">
                              <div class="ele-animate slideDown">
                                  <div class="ele-content"><img class="ele-detail" src="img/one_8.png"></div>
                              </div>
                          </li>
                          <li class="ele-image ele_po9">
                              <div class="ele-animate slideDown">
                                  <div class="ele-content"><img class="ele-detail" src="img/one_9.png"></div>
                              </div>
                          </li>
                          <li class="ele-image ele_po10">
                              <div class="ele-animate slideDown">
                                  <div class="ele-content"><img class="ele-detail" src="img/one_10.png"></div>
                              </div>
                          </li>
                    </ul>
                 </div>          
            </div>
            <!--第一屏 E-->
         .....
        </div>
</div>

线上效果为：http://www.5usport.com/download/dec/twinwap/wap.html

本地效果为：app/plug/swiper/screen_scroll.html