fullpage和swiper对比
来源:互联网 发布:读书无用论 知乎 编辑:程序博客网 时间:2024/06/05 10:46
使用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>
- fullpage和swiper对比
- 全屏滚动实现:fullPage.js和fullPage
- Swiper学习之一---入门:swiper相关文件、swiper代码结构和样式、初始化Swiper
- FullPage.js参数和函数详解
- swiper
- swiper
- swiper
- swiper
- Swiper
- swiper
- Swiper
- Swiper
- Swiper
- swiper的使用和轮播图
- bootstrap和swiper的使用
- Velocity.js和fullPage.js和move.js
- jquery fullpage 插件增加头部和版权的方法
- 案例十四、css3和fullpage实现全屏滚动
- 输出才更有价值——欢迎使用CSDN-markdown编辑器
- 深入理解JVM(七)——Class文件结构
- 《大话数据结构》学习笔记(一)
- JavaScript数据结构(4):树
- HDU 1106 排序
- fullpage和swiper对比
- Select count(*) from与Select * from的区别
- Python入门系列——第14篇
- 【深度学习】深度学习权重初始化
- Bootstrap源码之旅-mixins解读(3)
- public,private及protected的区别
- Android MediaPlayer的使用方法
- phpstrom DATABASE的使用问题
- 深入理解JVM(八)——类加载的时机