幻灯片/轮播
jQuery超酷3D幻灯片效果
PetitQ
flux.js 是一款能做出 3D 效果的 jQuery 幻灯片插件。这款 jQuery 幻灯片插件共有 5 种效果：爆炸效果、3D 翻转效果、3D 旋转效果、立方体效果和翻页效果。需要注意的是 flux 需要浏览器支持 CSS3 transitions 才能正常工作。
HTML 结构:
<div id="slider">
<img src="imgs/peacock.jpg" alt="" />
<img src="imgs/koi.jpg" alt="" />
<img src="imgs/life.jpg" alt="" />
</div>
<ul class="transitions">
<li><button type="button" data-transition="explode" data-params='{"rows": 4}'>Explode</button></li>
<li><button type="button" data-transition="tiles3d" data-params='{"columns": 6}'>Tile</button></li>
<li><button type="button" data-transition="bars3d">Bars</button></li>
<li><button type="button" data-transition="cube">Cube</button></li>
<li><button type="button" data-transition="turn">Turn</button></li>
</ul>
也想出现在这里？联系我们吧
调用方法:
首先要引入 jQuery 和 jquery.flux.js 文件。然后按下面方法调用：
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: false,
controls: false,
transitions: ['explode', 'tiles3d', 'bars3d', 'cube', 'turn'],
autoplay: false
});
$('.transitions').click(function(event){
event.preventDefault();
window.f.next($(event.target).data('transition'), $(event.target).data('params'));
});
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
