当前位置: 首页 > news >正文

坤简炫酷的JQuery轮播图插件

介绍:

找到了一个炫酷的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>
http://www.lryc.cn/news/116734.html

相关文章:

  • C# 条件编译
  • IntelliJ IDEA如何重新弹出git身份验证窗口
  • 【雕爷学编程】Arduino动手做(200)---WS2812B幻彩LED灯带4
  • 【雕爷学编程】Arduino动手做(201)---DFRobot 行空板03
  • Spring中Bean的“一生”(生命周期)
  • 安卓:LitePal操作数据库
  • 【JavaEE初阶】了解JVM
  • 基于vue2.0和elementUi的vue农历日期组件vue-jlunar-datepicker(插件)
  • Python爬虫——selenium_元素定位
  • 短视频内容平台(如TikTok、Instagram Reel、YouTube Shorts)的系统设计
  • 【git】Git 回退到指定版本:
  • kibana+nginx配置密码 ubuntu
  • Git仓关联多个远程仓路径
  • 使用ffmpeg将m4a及wav等文件转换为MP3格式
  • 【CI/CD】Git Flow 分支模型
  • SpringBoot Thymeleaf模板引擎
  • prometheus部署
  • Flink-Window详细讲解-countWindow
  • React 18 state 如同一张快照
  • EasyPoi导出 导入(带校验)简单示例 EasyExcel
  • 八大排序
  • 网络安全【黑客技术】自学
  • 【网络通信】socket编程——TCP套接字
  • ROS2系统学习番外篇2---用VSCode开发ROS2程序
  • 06 - Stream如何提高遍历集合效率?
  • 【Spring】使用注解的方式获取Bean对象(对象装配)
  • [webpack] 基本配置 (一)
  • 模板学堂|SQL数据集动态参数使用场景及功能详解
  • Wlan——射频和天线基础知识
  • 前端实习周记第三周周记