flipster.js触摸屏banner的3D旋转木马动画

1、新建html文档。

2、书写hmtl代码。

<div class="flipster">

 <ul>

  <li> <a href="#" class="Button Block">

   <h1>第一张banner</h1>

   第一个div

   </a> </li>

  <li> <a href="#" class="Button Block">

   <h1>第二张banner</h1>

   ement Flipster

   </a> </li>

  <li> <a href="#" class="Button Block">

   <h1>第三张banner</h1>

   Roundtyle!

   </a> </li>

  <li> <a href="#" class="Button Block">

   <h1>第四张banner</h1>

   Examption

   </a> </li>

  <li> <a href="#" class="Button Block">

   <h1>第五张banner</h1>

   Exampl7on

   </a> </li>

 </ul>

</div>

3、书写css代码。

body { background: #f9f7f6; color: #404d5b; font-weight: 500; font-size: 1.05em; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; }

.clearfix { *zoom: 1;

}

.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }

.clearfix:after { clear: both; }

.hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

.input-block-level { display: block; width: 100%; min-height: 30px; -we   bkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { color: #333333; font-weight: 400; font-size: 15px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; }

a { color: #da0d25; text-decoration: none; }

a:hover, a:focus { color: #f22840; text-decoration: none; }

p { margin: 0 0 20px; }

small { font-size: 85%; }

strong { font-weight: 600; }

em { font-style: italic; }

cite { font-style: normal; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }

h1, h2, h3, h4, h5, h6 { margin: 10px 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 20px; color: inherit; text-rendering: optimizelegibility; }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: 400; line-height: 1; color: #8d8d8d; }

h1, h2, h3 { line-height: 40px; }

h1 { font-size: 41.25px; }

h2 { font-size: 33.75px; }

h3 { font-size: 26.25px; }

h4 { font-size: 18.75px; }

h5 { font-size: 15px; }

h6 { font-size: 12.75px; }

h1 small { font-size: 26.25px; }

h2 small { font-size: 18.75px; }

h3 small { font-size: 15px; }

h4 small { font-size: 15px; }

.Subpage h1, .Subpage h2, .Subpage h3 { line-height: 30px; }

.Subpage h1 { font-size: 30px; }

.Subpage h2 { font-size: 26.25px; }

.Subpage h3 { font-size: 22.5px; }

.Subpage h4 { font-size: 18.75px; }

.Subpage h5 { font-size: 15px; }

.Subpage h6 { font-size: 12.75px; }

.Subpage h1 small { font-size: 22.5px; }

.Subpage h2 small { font-size: 18.75px; }

.Subpage h3 small { font-size: 15px; }

.Subpage h4 small { font-size: 15px; }

body { margin: 0; padding: 0; }

.Container { margin: 0 auto; padding: 0; }

.Text-Left { text-align: left; }

.Text-Right { text-align: right; }

.Text-Center { text-align: center; }

.Float-Left { float: left; margin-right: 20px; }

.Float-Right { float: right; margin-left: 20px; }

.Button { display: inline-block; padding: 20px; margin: 0; background-color: #da0d25; background-position: center center; background-repeat: no-repeat; color: #7a0715; text-shadow: none; vertical-align: middle; cursor: pointer; border: 0; -ms-transition: color 300ms ease, background-color 300ms ease; -we   bkit-transition: color 300ms ease, background-color 300ms ease; -moz-transition: color 300ms ease, background-color 300ms ease; -o-transition: color 300ms ease, background-color 300ms ease; transition: color 300ms ease, background-color 300ms ease; }

.Button:hover, .Button:focus { color: #7a0715; background: #f22840; }

.Button.Small { padding: 5px 10px; font-size: small; }

.Button.Block { padding: 20px 40px; width: 300px; height: 200px; }

.Button h1 { font-size: 2em; line-height: 1.25em; color: #FFF; }

.flipster { padding-bottom: 50px; }

.pull-right { float: right; }

.pull-left { float: left; }

.hide { display: none; }

.show { display: block; }

.invisible { visibility: hidden; }

.affix { position: fixed; }

4、书写并添加js代码。

<script src="js/jquery-1.8.3.min.js"></script> 

<script src="js/jquery.flipster.js"></script> 

<script>

$(function(){ 

$(".flipster").flipster({ 

style: 'carousel', 

start: 0 }); 

});

</script>

5、代码整体结构。

6、查看效果。