jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件。该jquery轮播图插件采用响应式设计，可以在垂直方向上制作出类似立方体滚动的3d轮播图效果。

使用方法

在页面中引入jquery和jquery.mousewheel.min.js以及样式文件jquery.mousewheel.min.css和鼠标滚轮插件jquery.pageScroll3d.min.js。

HTML结构

该jQuery全屏3D轮播图的基本HTML结构如下：

Section 1

Section 2

Section 3

Section 4

CSS样式

你可以为该jquery 3d轮播图设置自己的样式，例如：

.s3d__side {

background-size: cover;

background-position: 50% 50%;

background-repeat: no-repeat;

}

.s3d__side.active h1 { left: -1%; }

.s3d__side:nth-child(1) { background-image: url("1.jpg"); }

.s3d__side:nth-child(2) { background-image: url("2.jpg"); }

.s3d__side:nth-child(3) { background-image: url("3.jpg"); }

.s3d__side:nth-child(4) { background-image: url("4.jpg"); }

.s3d__side h1 {

display: inline-block;

position: absolute;

left: -100%;

bottom: 10%;

padding: .2% 1.5% .2% 2.5%;

background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));

background: linear-gradient(-90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));

color: #fff;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);

border-radius: 1px;

-webkit-transition: left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05);

transition: left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05);

}

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jQuery全屏3D轮播图插件。

$(document).ready(function() {

$('.main-content').scroll3D();

});