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>