3D-Flip-Slider是一款纯JS和CSS3超酷3D翻转式幻灯片插件。该幻灯片在点击前后按钮时,图片或幻灯片内容以3D翻转的方式进行切换。该3D翻转幻灯片的特点还有:
- 纯JavaScript,不依赖jQuery库。
- 轻量级,压缩版本只有2.5kb。
- 支持图片和任何HTML内容。
- 性能优化,支持IE10+浏览器。
- 可通过外部元素来触发前后导航事件。
使用方法
在页面中引入flipslide.js和flipslide.css文件。
<link rel="stylesheet" href="path/to/flipslide.css"> <script src="dist/flipslide.js"></script>
HTML结构
该3D翻转幻灯片的基本HTML结构如下:
<div class="flip-slider"> <div class="flip-frame"> <div class="flip"> <div class="slide"><img src="images/1.jpg" alt="" /></div> <div class="slide"><img src="images/2.jpg" alt="" /></div> <div class="slide"><img src="images/3.jpg" alt="" /></div> <div class="slide"><img src="images/4.jpg" alt="" /></div> <div class="slide"><img src="images/5.jpg" alt="" /></div> <div class="slide color"> <h1>Slide Title</h1> <b>HTML Page</b> <i>Content</i> </div> </div> </div> <div class="nav"> <button class="prev">Previous</button> <button class="next">Next</button> </div> </div>
初始化插件
可以通过new FlipSlider()
来实例化幻灯片对象。
var flip1 = new FlipSlider({ startIndex: 3, container: document.querySelector(".flip-slider") }); //或者 var flip2 = new FlipSlider({ container: document.getElementById("#flipSlider2") });
绑定触发事件
方法一:在元素上绑定事件。
// Binding Previous Event document.querySelector("#flipPrevious").onclick = flip1.prevFlip; // Binding Next Event document.querySelector("#flipNext").onclick = flip1.nextFlip;
方法二:通过JS来触发事件。
flip1.prevFlip(); // Trigger Previous Event flip1.nextFlip(); // Trigger Next Event
方法三:在标签上通过内联的方式来绑定事件:
<p><b onclick="flip1.prevFlip();">Click here</b> to flip Previous the slider</p> <p><b onclick="flip1.nextFlip();">Click here</b> to flip next the slider</p>
3D-Flip-Slider幻灯片插件的github地址为:https://github.com/ashishkumar-ui/3D-Flip-Slider
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!