更新时间：2019/4/24 上午11:11:06
更新说明：jPicture 主程序升级至 4.1.0；组件声明式的使用方式发生了改变；部分参数的使用方法进行了修改；程序结构优化。
更新时间：2018/6/7 15:32
更新说明：根据 jPicture 最新版本进行 api 更新和使用方法更新。
不再支持移动端，专注于桌面端；不再设置全局变量 jPicture，直接以 jQuery 插件的形式调用
1 | $(selector).jPicture(); |
图片内容直接在脚本中传入，不再直接写在 HTML 代码中；可在参数中直接设置宽高；提供三种切换方式，show, fade, slide针对 slide 方式可以选择是否使用 css3 的 transform 属性；可以选择下方切换按钮的形状；
更新时间：2017/8/4 下午1:16:49
更新说明：对 jPicture 进行了升级，修复了在移动端手动切换与自动切换同时进行的重叠问题。
jPicture
一款兼容主流浏览器的基于 jQuery 的图片切换组件。
依赖资源：jQuery（v1.11.0或以上版本）；
适用环境：桌面端浏览器；
兼容情况：IE8+, Chrome, Firefox, Safari, 移动端浏览器(WebKit 内核)。
使用方法： jPicture(selector, settings);
1 2 | selector: 目标元素（合法的 jQuery 选择器）；settings: 组件配置（共有 4 个参数配置）； |
需要注意的是：在移动端会自动使用 slide 滑动效果（fade 无效），同时会自动移除左右切换箭头，也会自动移除下方切换按钮上面的点击事件。因为在移动端，很少会通过点击箭头和按钮来切换图片，绝大多数情况下都是通过在图片上左右滑动的方式进行切换，所以 jPicture 才做出了这些调整。自动切换可按照需要正常配置。也就是说，在移动端有且只有 auto 属性可进行配置，其它属性都会调用内部默认的配置。
应用示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="jPicture.css"> <style> #imgBox{width:800px;height:450px;} </style> </head> <body> <!-- HTML 主体结构，需按照此格式书写，其中的 <a> 链接可根据实际需要添加或删除 --> <!-- 左右箭头和切换按钮的样式可根据实际需求在 jPicture.css 文件中进行修改 --> <div id="imgBox"> <div> <div><a href="#1"><img src="1.jpg"></a></div> <div><a href="#2"><img src="2.jpg"></a></div> <div><a href="#3"><img src="3.jpg"></a></div> <div><a href="#4"><img src="4.jpg"></a></div> <div><a href="#5"><img src="5.jpg"></a></div> </div> </div> <script src="jquery-1.11.0.min.js"></script> <script src="jPicture.js"></script> <script> // Javascript 代码 jPicture("#imgBox", { type: "slide", autoplay: 5000 }); </script> </body></html> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery产品切换tab选项卡
- 下一个特效： js联动选择插件mobileSelect.js