上海网站建设 网站开/推广网站模板

介绍：

找到了一个炫酷的JQuery轮播图插件，只需要配置三四行代码就可以实现很多二维三维炫酷的切换效果。

视频效果及教程：

https://www.bilibili.com/video/BV1Fu4y1d776/

代码：

https://github.com/w-x-x-w/AwesomeWeb

使用教程:

html部分：

<div id="slider"><img src="./imgs/1.png" alt=""><img src="./imgs/2.png" alt=""><img src="./imgs/3.jpg" alt=""></div>
<div id="transitions"><ul id="trans2D">2D转换<li><a href="#bars">Bars</a></li><li><a href="#zip">Zip</a></li></ul><ul id="trans3d">3D转换<li><a href="#bars3d">Bars3D</a></li></ul></div>

引入两个js文件：jquery.js和这个js插件

<script src="./js/jquery.js"></script>
<script src="./js/flux.min.js"></script>

然后就是编写自己的js代码：

<script>$(function () {
//css选择器window.f = new flux.slider('#slider', {// 是否自動播放autoplay: false,// 是否分页显示pagination: false,});})$('div#transitions li a').on('click', function (event) {event.preventDefault();// If this is a 3D transform and the browser doesn't support 3D then inform the userif ($(event.target).closest('ul').is('ul#trans3d') && !flux.browser.supports3d) {alert("The '" + event.target.innerHTML + "' transition requires a browser that supports 3D transforms");return;}console.log(event.target.href.split('#')[1]);
//window.f.next（）传入转换的效果名，event.target.href.split('#')[1]获取到的就是转换效果的名字window.f.next(event.target.href.split('#')[1]);});
</script>