1. 先引入jquery.js,再引入switchPage.js

文件地址:点击打开链接

<script src="jquery.min.js"></script>
<script src="switchPage.js"></script>

2. 书写html

<div id="container">
<div class="section active" style="background: red"></div>
<div class="section" style="background: green"></div>
<div class="section" style="background: yellow"></div>
<div class="section" style="background: pink"></div>
</div>

3. 设置对应的样式

 <style>
html,body{
height: 100%;
overflow: hidden;
}
#container{
height: 100%;
position: relative;
}
#container,.section{
height: 100%;
position: relative;
}
</style>

4.  调用插件方法

$(function () {
$('#container').switchPage({
'loop':true,
'keyboard':true
})
})

使用switchPage.js插件jQuery全屏滚动翻页的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  3. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  4. Scrollify – jQuery全屏滚动插件

    和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...

  5. 学习笔记: js插件 —— fullPage.js (页面全屏滚动)

    fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js,   233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...

  6. FullPage.js – 轻松实现全屏滚动(单页网站)效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  7. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

  8. H5全屏滚动专题页最佳实践

    1.slip.js + rem.js 主要插件: slip.js github: https://github.com/binnng/slip.js rem.js 插件为阿里淘宝的 rem 实现的基础 ...

  9. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

随机推荐

  1. Qt自适应大小显示图片,添加菜单

    由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...

  2. GoF23种设计模式

    创建型模式 1.ABSTRACT FACTORY-追MM少不了请吃饭了,麦当劳的套餐和肯德基的套餐都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说"两个B ...

  3. 【Mysql】phpMyAdmin安装与配置

    phpMyAdmin概念 phpMyAdmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库.借由此Web接口可 ...

  4. Laravel在不同的环境调用不同的配置文件

    Laravel在不同的环境调用不同的配置文件   Laravel如何在不同的环境调用不同的配置文件?社区这个问题问的蛮多,如何优雅的方法实现呢,应该有好多方法吧,我一般习惯用两种方法,设置环境变量,或 ...

  5. JSon_零基础_006_将JSon格式的字符串转换为Java对象

    需求: 将JSon格式的字符串转换为Java对象. 应用此技术从一个json对象字符串格式中得到一个java对应的对象. JSONObject是一个“name.values”集合, 通过get(key ...

  6. project euler 26:Reciprocal cycles

    A unit fraction contains 1 in the numerator. The decimal representation of the unit fractions with d ...

  7. UVA 10603 Fill(正确代码尽管非常搓,网上很多代码都不能AC)

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=1544">click here~ ...

  8. vps自己搭建VPN(转)

    1.购买一个VPS: https://www.pzea.com/North-America-openvz-vps.html 2.下载putty软件,进行vpn安装: http://www.chiark ...

  9. 【C/C++】C++11 Move, Forward

    左值与右值 Lvalue:可以出现在 operator= 左边的 Rvalue:只能出现在operator= 右边的 ; int a = b; a = b; a = a + b; a + b = a; ...

  10. fedora 26 安装 mplayer smplayer

    dnf install mplayer dnf install smplayer 提示仓库 里没有这个软件 fedora默认不提供一些有版权争议的软件,非开源的项目包,所以需要用rpm fusion源 ...