fullpage和swiper對比

使用fullpage須要引入這些文件：

<link rel="stylesheet" href="http://www.dowebok.com/demo/2014/77/css/jquery.fullPage.css">

<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

<script src="http://cdn.staticfile.org/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script src="http://www.dowebok.com/demo/2014/77/js/jquery.fullPage.min.js"></script>

在國外fullpage.js的使用很普遍，由於簡單好看，而在國內也有不少官網使用了fullpage技術，網易郵箱啊，以及iphone5的宣傳啊。案例連接：http://www.dowebok.com/demo/2014/77/

swiper的使用：

 

使用步驟：

1.首先加載插件，須要用到的文件有swiper.min.js和swiper.min.css文件。

2.HTML內容

<div class="swiper-container">

    <div class="swiper-wrapper">

        <div class="swiper-slide">Slide 1</div>

        <div class="swiper-slide">Slide 2</div>

        <div class="swiper-slide">Slide 3</div>

    </div>

    <!-- 若是須要分頁器 -->

    <div class="swiper-pagination"></div>

    

    <!-- 若是須要導航按鈕 -->

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

    

    <!-- 若是須要滾動條 -->

    <div class="swiper-scrollbar"></div>

</div>

 

 

 

 

3.swiper的初始化

<script>        

  var mySwiper = new Swiper ('.swiper-container', {

    direction: 'vertical',

    loop: true,

    

    // 若是須要分頁器

    pagination: '.swiper-pagination',

    

    // 若是須要前進後退按鈕

    nextButton: '.swiper-button-next',

    prevButton: '.swiper-button-prev',

    

    // 若是須要滾動條

    scrollbar: '.swiper-scrollbar',

  })        

  </script>