强大实用的jQuery幻灯片插件Owl Carousel
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：
兼容所有浏览器
支持响应式
支持 CSS3 过度
支持触摸事件
支持 JSON 及自定义 JSON 格式
支持进度条
支持自定义事件
支持延迟加载
支持自适应高度
Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。
浏览器兼容：兼容所有浏览器，包括 IE6、IE7。
jQuery 兼容：兼容 1.7 及以上版本。
1、引入文件
&link href="css/owl.carousel.css" rel="stylesheet"&
&link href="css/owl.theme.css" rel="stylesheet"&
&script src="js/jquery.min.js"&&/script&
&script src="js/owl.carousel.js"&&/script&
&div id="owl-demo" class="owl-carousel"&
&div&1&/div&
&div&2&/div&
&div&3&/div&
&div&4&/div&
&div&5&/div&
&div&6&/div&
&div&7&/div&
&div&8&/div&
3、JavaScript
$(function(){
$('#owl-example').owlCarousel();
幻灯片每页可见个数
itemsDesktop
设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false
itemsDesktopSmall
itemsTablet
itemsTabletSmall
同上，默认为 false
itemsMobile
itemsCustom
singleItem
是否只显示一张
itemsScaleUp
slideSpeed
幻灯片切换速度，以毫秒为单位
paginationSpeed
分页切换速度，以毫秒为单位
rewindSpeed
重回速度，以毫秒为单位
布尔值/整数
自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次
stopOnHover
鼠标悬停停止自动播放
navigation
显示“上一个”、“下一个”
navigationText
[“prev”,”next”]
设置“上一个”、“下一个”文字，默认是[“prev”,”next”]
滑动到第一个
scrollPerPage
每页滚动而不是每个项目滚动
pagination
paginationNumbers
分页按钮显示数字
responsive
responsiveRefreshRate
每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式
responsiveBaseWidth
jQuery 选择器
owl-carousel
添加 CSS，如果不需要，最好不要使用
主题样式，可以自行添加以符合你的要求
lazyFollow
当使用分页时，如果跨页浏览，将不加载跳过页面的图片，只加载所要显示页面的图片，如果设置为 false，则会加载跳过页面的图片。这是 lazyLoad 的子选项
lazyEffect
布尔值/字符串
延迟加载图片的显示效果，默认以 400 毫秒淡入，若为 false 则不使用效果
autoHeight
自动使用高度
JSON 文件路径
jsonSuccess
处理自定义 JSON 格式的函数
dragBeforeAnimFinish
忽略过度是否完成（只限拖动）
关闭/开启鼠标事件
关闭/开启触摸事件
addClassActive
给可见的项目加入 “active” 类
transitionStyle
添加 CSS3 过度效果
beforeUpdate
响应之后的回调函数
afterUpdate
响应之前的回调函数
beforeInit
初始化之前的回调函数
初始化之后的回调函数
beforeMove
移动之前的回调函数
移动之后的回调函数
afterAction
初始化之后的回调函数
startDragging
拖动的回调函数
afterLazyLoad
延迟加载之后的回调函数
自定义事件
自动播放，可传递一个参数作为播放速度
停止自动播放
跳到第几个
owl.jumpTo
不使用动画跳到第几个
& CopyRightmultiscroll.js – jQuery左右垂直反向滚动插件
也许你已经知道
是一个非常优秀插件，很多优秀的公司都在使用它，比如猪八戒、网易等等。今天我们再介绍一款该插件作者开发的另一款插件——multiscroll.js。multiscroll.js 和 fullpage.js 有点类似，也是页面全屏滚动，只不过 fullpage.js 是整屏滚动，而 multiscroll.js 是分成左右两个面板，垂直反向滚动合在一起。
因为效果和 fullpage.js 类似，且出自同一作者，所有这两款插件的一些属性和方法类似或相同，详细请查看页面下方的配置。
浏览器兼容
其实也可以兼容 IE6、IE7，因为最核心的滚动是支持的，只是有一些效果不支持，比如垂直居中。如果做一些兼容处理，也可以很好的兼容。
1、引入文件
&link rel="stylesheet" href="css/jquery.multiscroll.css"&
&script src="js/jquery.min.js"&&/script&
&script src="js/jquery.easings.min.js"&&/script&
&script src="js/jquery.multiscroll.min.js"&&/script&
&div class="dowebok-Wrap"&
&div class="ms-left"&
&div class="ms-section"&左1&/div&
&div class="ms-section"&左2&/div&
&div class="ms-section"&左3&/div&
&div class="ms-right"&
&div class="ms-section"&右1&/div&
&div class="ms-section"&右2&/div&
&div class="ms-section"&右3&/div&
3、JavaScript
$(function(){
$('#dowebok-Wrap').multiscroll();
verticalCentered
内容垂直居中
scrollingSpeed
过度时间，即页面滚动动画的时间，以毫秒为单位
sectionsColor
每一屏的背景颜色
定义每一屏的命名锚记
‘easeInQuart’
循环滚动（在第一屏时滚动到最后一屏）
loopBottom
循环滚动（在最后一屏时滚动到第一屏）
选择使用 JavaScript 或 CSS3 transforms 滚动页面，使用 CSS3 transforms 能够更好的支持移动和平板设备。如果设置为 true，但浏览器不支持 CSS3 transforms，则回退使用 JavaScript
paddingTop
顶部填充，你可以放置一个固定的头部（查看演示）
paddingBottom
底部填充，你可以放置一个固定的底部（查看演示）
normalScrollElements
null/字符串
keyboardScrolling
使用键盘导航
touchSensitivity
定义浏览器窗口的宽度/高度的百分比，让用户滑动多少距离可以滚动到下一屏
布尔值/字符串
绑定一个菜单
navigation
显示圆点导航
navigationPosition
‘right’
圆点导航的位置，可选 left 或 right
navigationTooltips
圆点导航的提示信息
moveSectionUp()
向上滚动一屏
moveSectionDown()
向下滚动一屏
滚动到某一屏，比如1）滚动到某一个命名锚记：$.fn.multiscroll.moveTo(‘firstSection’);2）滚动到第3屏：
$.fn.multiscroll.moveTo(3);
setAllowScrolling
setKeyboardScrolling
开启/关闭键盘控制
setScrollingSpeed
设置动画过度时间
滚动后的回调函数
滚动前的回调函数
afterRender
页面初始化后的回调函数
afterResize
浏览器大小调整后的回调函数
& CopyRight全屏滚动插件FullPage的使用
欢迎转载，但请务必在明确位置注明出处：
简介如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等&&&&fullPage.js是开源的JQuery插件库，GitHub 地址：兼容性jQuery 兼容兼容 jQuery 1.7+。浏览器兼容IE8+ ?Chrome ?Firefox ?Opera ?Safari ?使用方法1、引入文件&link&rel=&stylesheet&&type=&text/css&&href=&css/jquery.fullPage.css&/&
&script&type=&text/javascript&&src=&js/jquery-1.8.3.min.js&&&/script&
&script&type=&text/javascript&&src=&js/jquery.fullPage.min.js&&&/script&2、HTML&body&
&div&id=&fullpage&&
&&&&&div&class=&section&active&&
&&&&&&&&&h1&每一个section是一屏，这是第一屏&/h1&
&&&&&&&&&p&^&/p&
&&&&&/div&
&&&&&div&class=&section&&
&&&&&&&&&h1&class=&a&&每一个section是一屏，这是第二屏&/h1&
&&&&&&&&&p&^&/p&
&&&&&/div&
&&&&&div&class=&section&&
&&&&&&&&&h1&class=&a&&每一个section是一屏，这是第三屏&/h1&
&&&&&&&&&p&^&/p&
&&&&&/div&
&&&&&div&class=&section&&
&&&&&&&&&h1&每一个section是一屏，这是第四屏&/h1&
&&&&&/div&
&/body&3、Css&style&type=&text/css&&
&&&&body&{
&&&&&&&&&color:&#FFFFFF;
&&&&&&&&&text-align:&
&&&&&&&&font-size:&20
&&&&&&&&position:&
&&&&&&&&bottom:&0
&&&&&&&&width:&100%;
&&&&&&&&text-align:&
&&&&&&&&animation:&top&3s&
&&&&&&&&-webkit-animation:&top&1s&&/*Safari&and&Chrome*/
&&&&&&&&display:&
&&&&&&&&display:&
&&&&&&&&animation:&in&3s;
&&&&&&&&-webkit-animation:&in&3s;&/*Safari&and&Chrome*/
&&&&@keyframes&top&{
&&&&&&&&0%&{
&&&&&&&&&&&&bottom:&0
&&&&&&&&25%&{
&&&&&&&&&&&&bottom:&300px
&&&&&&&&50%&{
&&&&&&&&&&&&bottom:&0
&&&&&&&&75%&{
&&&&&&&&&&&&bottom:&300px
&&&&&&&&100%&{
&&&&&&&&&&&&bottom:&0px
&&&&@-webkit-keyframes&top&{
&&&&&&&&0%&{
&&&&&&&&&&&&bottom:&0
&&&&&&&&90%&{
&&&&&&&&&&&&bottom:&20px
&&&&&&&&100%&{
&&&&&&&&&&&&bottom:&0px
&&&&/*进入页面文字移动的动画*/
&&&&@keyframes&in&{
&&&&&&&&from&{
&&&&&&&&&&&&margin-left:&-200
&&&&&&&&to&{
&&&&&&&&&&&&margin-left:&0
&&&&@-webkit-keyframes&in&/*Safari&and&Chrome*/
&&&&&&&&from&{
&&&&&&&&&&&&margin-left:&-200
&&&&&&&&to&{
&&&&&&&&&&&&margin-left:&0
&/style&4、JavaScript&script&type=&text/javascript&&
&&&&$(function&()&{
&&&&&&&&$(&#fullpage&).fullpage({
&&&&&&&&&&&&//设置各个页面的颜色
&&&&&&&&&&&&sectionsColor:&['#1bbc9b',&'#4BBFC3',&'#7BAABE',&'#f90'],
&&&&&&&&&&&&//设置循环滚动&
&&&&&&&&&&&&continuousVertical:&true,
&&&&&&&&&&&&//设置是否显示项目导航
&&&&&&&&&&&&navigation:&true,
&&&&&&&&&&&&//页面初始化完成后的回调函数
&&&&&&&&&&&&afterRender:&function&()&{
&&&&&&&&&&&&&&&&$('h1').addClass('in');
&&&&&&&&&&&&},
&&&&&&&&&&&&//滚动到某一屏后的回调函数
&&&&&&&&&&&&afterLoad:&function&()&{
&&&&&&&&&&&&&&&&if&(!$('h1').hasClass('in'))&{
&&&&&&&&&&&&&&&&&&&&$('h1').addClass('in')
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&},
&&&&&&&&&&&&//离开某一屏时的回调函数
&&&&&&&&&&&&onLeave:&function&()&{
&&&&&&&&&&&&&&&&$('h1').removeClass('in')
&&&&&&&&&&&&}
&&&&&&&&});
&/script&配置1、选项选项类型默认值说明verticalCentered字符串true内容是否垂直居中resize布尔值false字体是否随着窗口缩放而缩放slidesColor函数无设置背景颜色anchors数组无定义锚链接scrollingSpeed整数700滚动速度，单位为毫秒easing字符串easeInQuart滚动动画方式menu布尔值false绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动navigation布尔值false是否显示项目导航navigationPosition字符串right项目导航的位置，可选 left 或 rightnavigationColor字符串#000项目导航的颜色navigationTooltips数组空项目导航的 tipslidesNavigation布尔值false是否显示左右滑块的项目导航slidesNavPosition字符串bottom左右滑块的项目导航的位置，可选 top 或 bottomcontrolArrowColor字符串#fff左右滑块的箭头的背景颜色loopBottom布尔值false滚动到最底部后是否滚回顶部loopTop布尔值false滚动到最顶部后是否滚底部loopHorizontal布尔值true左右滑块是否循环滑动autoScrolling布尔值true是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条scrollOverflow布尔值false内容超过满屏后是否显示滚动条css3布尔值false是否使用 CSS3 transforms 滚动paddingTop字符串0与顶部的距离paddingBottom字符串0与底部距离fixedElements字符串无normalScrollElements无keyboardScrolling布尔值true是否使用键盘方向键导航touchSensitivity整数5continuousVertical布尔值false是否循环滚动，与 loopTop 及 loopBottom 不兼容animateAnchor布尔值truenormalScrollElementTouchThreshold整数52、方法名称说明moveSectionUp()向上滚动moveSectionDown()向下滚动moveTo(section, slide)滚动到moveSlideRight()slide 向右滚动moveSlideLeft()slide 向左滚动setAutoScrolling()设置页面滚动方式，设置为 true 时自动滚动setAllowScrolling()添加或删除鼠标滚轮/触控板控制setKeyboardScrolling()添加或删除键盘方向键控制setScrollingSpeed()定义以毫秒为单位的滚动速度3、回调函数名称说明afterLoad滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算onLeave滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。afterRender页面结构生成后的回调函数，或者说页面初始化完成后的回调函数afterSlideLoad滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数onSlideLeave某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数文档来自：/77.html}