jQuery全屏3D轮播图插件

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

使用方法

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

<link rel="stylesheet" href="jquery.pageScroll3d.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.pageScroll3d.min.js"></script>
<script src="path/to/jquery.mousewheel.min.js"></script>
                

HTML结构

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

<main class="main-content">
  <section>
    <h1>Section 1</h1>
  </section>
  <section>
    <h1>Section 2</h1>
  </section>
  <section>
    <h1>Section 3</h1>
  </section>
  <section>
    <h1>Section 4</h1>
  </section>
</main>         
                

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();
  
});
                

jQuery全屏3D轮播图插件的github地址为：https://github.com/Leon1258/jQuery.PageScroll3D