这个插件是一款jQuery和css3超酷三面折纸3D幻灯片插件。插件中使用了CSS 3D Transforms、透视和CSS Transitions。
HTML
该3d幻灯片插件的初始html结构如下：使用一个div包含两个figures，每个figures中包含一张图片和一个包含了图片标题和描述的figcaption
<div class="fs-slider" id="fs-slider"> <figure> <img src="images/1.jpg" alt="image01" /> <figcaption> <h3>Eloquence</h3> <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p> </figcaption> </figure> <figure> <img src="images/2.jpg" alt="image02" /> <figcaption> <h3>Quintessential</h3> <p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p> </figcaption> </figure> <!-- ... --></div> |
在插件运行时，我们需要使用jQuery将html结构改为如下：
<section class="fs-container"> <div class="fs-wrapper"> <div class="fs-slider" id="fs-slider"> <div class="fs-block"> <figure style="display: block; "> <img src="images/1.jpg" alt="image01" /> <figcaption> <h3>Eloquence</h3> <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p> </figcaption> </figure> </div><!-- /fs-block --> <div class="fs-block"> <!-- ... --> </div> <!-- ... --> </div><!-- /fs-slider --> <nav class="fs-navigation"> <span>Previous</span> <span>Next</span> </nav> </div><!-- /fs-wrapper --></section><!-- /fs-container --> |
每一个figure都被包装到class为fs-block的div中。
css代码和js代码请参考下载文件。
