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

});

總結

以上是生活随笔為你收集整理的html全屏轮播图插件,jQuery全屏3D轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。