更新时间：2019/4/24 上午11:11:06
更新说明：jPicture 主程序升级至 4.1.0；组件声明式的使用方式发生了改变；部分参数的使用方法进行了修改；程序结构优化。
更新时间：2018/6/7 15:32
更新说明：根据 jPicture 最新版本进行 api 更新和使用方法更新。
不再支持移动端，专注于桌面端；不再设置全局变量 jPicture，直接以 jQuery 插件的形式调用
$(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);
selector: 目标元素（合法的 jQuery 选择器）； settings: 组件配置（共有 4 个参数配置）；
需要注意的是：在移动端会自动使用 slide 滑动效果（fade 无效），同时会自动移除左右切换箭头，也会自动移除下方切换按钮上面的点击事件。因为在移动端，很少会通过点击箭头和按钮来切换图片，绝大多数情况下都是通过在图片上左右滑动的方式进行切换，所以 jPicture 才做出了这些调整。自动切换可按照需要正常配置。也就是说，在移动端有且只有 auto 属性可进行配置，其它属性都会调用内部默认的配置。
应用示例:
<!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>
讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
-
使用方法里“dotEventType 下方按钮用来切换图片时的事件类型（click / moueseenter） ”，“ moueseenter”多写了“e”
-
您好，感谢您的反馈。非常感谢您的指正，已修改。
-
自动播放不能循环播放吗？到最后一张就停下来了，另外mouseenter是不是不能和自动播放同时使用呢？
-
您好，自动播放是可以正常循环播放的，mouseenter 也能与之同时使用。
-
在哪里修改可以将下面的鼠标点击切换的那个原点去掉，和将两边的箭头去掉呢?
您好，感谢您的反馈。设置 arrow: false 即可将默认箭头移除，设置 dot: false 即可将下方按钮移除。新版程序已提交
-
能否在PC端将箭头移除呢？
您好，感谢您的反馈。设置 arrow: false 即可将默认箭头移除。新版程序已提交，待审核通过后即可查看
-
楼主，怎么全部图片一起出来了呢？
-
您好，您看一下是否按照 jpicture 规定的格式设置的，我也是按照它的方式设置的，现在已经更新了，设置方式跟之前不一样了，你可以去看一下
-
为什么只出来一张图片可以切换
您好，暂时还没遇到您说的问题，也没有用户反馈过类似问题，您看看是否您的程序写的存在问题，或者将您的代码发给我，我帮您看看
那这个插件的图片高宽度是指定的吗？我现在要切换的图片是要从数据库查出来的，类似于qq聊天记录里的图片左右切换
图片的外层容器一定要设置固定的宽高，里面的图片会根据这个宽高自动附上尺寸
我滑动也是只有一张图
base64,iVBORw0KGgoAAAAN.....) 这一段是什么意思
您好，样式表中的这段代码是左右切换箭头的图片，这是将图片以 base64 转码后再通过 background 引入的
您好，刷新页面，轮播所有的图片会闪现，然后才正常，请问大神这是怎么回事儿？怎么解决啊？
感谢您的使用，这种情况给 selector 那个参数指向的元素（就是 jPicture 第一个参数指向的那个元素）手动添加一个 overflow:hidden 的样式就可以了
你好 jq版本和页面其他地方有冲突怎么解决
您好，jPicture 建议使用的是 jQuery v1.11.0 或以上的版本，因为在淡入淡出的效果中如果连续快速切换，v1.11.0 之前的版本会使图片的透明度出现问题。所以建议使用 v1.11.0+ 的版本。您现在的页面出现冲突是因为引入了高版本 jQuery 导致页面中的其它js程序出问题吗？你是用的是哪个版本呢？
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
