jQuery整页banner切换

1、新建html文档。

2、书写hmtl代码。

<div class="pt-triggers" style="display: block;">

 <button id="iterateEffects" class="pt-touch-button">显示下一页切换</button>

</div>

<div id="pt-main" class="pt-perspective">

 <div class="pt-page pt-page-1">

  <h1><span>A collection of</span>页面切换效果</h1>

 </div>

 <div class="pt-page pt-page-2">

  <h1><span>A collection of</span>页面切换效果</h1>

 </div>

 <div class="pt-page pt-page-3">

  <h1><span>A collection of</span>页面切换效果</h1>

 </div>

 <div class="pt-page pt-page-4">

  <h1><span>A collection of</span>页面切换效果</h1>

 </div>

 <div class="pt-page pt-page-5">

  <h1><span>A collection of</span>页面切换效果</h1>

 </div>

 <div class="pt-page pt-page-6">

  <h1><span>A collection of</span>页面切换效果</h1>

 </div>

</div>

3、初始化css代码。

<style>

html, body { height: 100%; overflow-y: hidden }

.pt-perspective { position: relative; width: 100%; height: 100%; -web  kit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; }

.pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; -web  kit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -web  kit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -web  kit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }

.pt-page-current { visibility: visible; z-index: 1; }

body { overflow: auto; }

.pt-page-ontop { z-index: 999; }

.pt-page h1 { position: absolute; font-weight: 300; font-size: 4.4em; line-height: 1; letter-spacing: 6px; margin: 0; top: 12%; width: 100%; text-align: center; text-transform: uppercase; word-spacing: -0.3em; }

.pt-page h1 span { font-family: 'Satisfy', serif; font-weight: 400; font-size: 40%; text-transform: none; word-spacing: 0; letter-spacing: 0; display: block; opacity: 0.4; }

</style>

4、书写css代码。

.pt-page h1 strong { color: rgba(0,0,0,0.1); }

.pt-page-1 { background: #0ac2d2; }

.pt-page-2 { background: #7bb7fa; }

.pt-page-3 { background: #60d7a9; }

.pt-page-4 { background: #fdc162; }

.pt-page-5 { background: #fd6a62; }

.pt-page-6 { background-color: #0B50DD; }

.pt-triggers { position: absolute; width: 300px; z-index: 999999; bottom: 12%; left: 50%; margin-top: 130px; -web  kit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.no-js .pt-triggers { display: none; }

.pt-touch-button { border: none; font-size: 13px; font-weight: 700; text-transform: uppercase; margin: 10px 0 20px; padding: 0px 20px; line-height: 50px; height: 50px; letter-spacing: 1px; width: 100%; cursor: pointer; display: block; font-family: 'Lato', Calibri, Arial, sans-serif; box-shadow: 0 3px 0 rgba(0,0,0,0.1); -web  kit-touch-callout: none; -web  kit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.pt-touch-button { background: #fff; color: #aaa; }

.pt-touch-button:active { box-shadow: 0 1px 0 rgba(0,0,0,0.1); }

.pt-message { display: none; position: absolute; z-index: 99999; bottom: 0; left: 0; width: 100%; background: #da475c; color: #fff; text-align: center; }

.pt-message p { margin: 0; line-height: 60px; font-size: 26px; }

.no-cssani   mations .pt-message { display: block; }

 @media screen and (max-width: 47.4375em) {

.pt-page h1 { font-size: 3em; }

}

5、代码整体结构。

6、查看效果。