jQuery图片切换插件jPicture

所属分类:媒体-幻灯片和轮播图

 25351  266  查看评论 (31)
分享到微信朋友圈
X
 jQuery图片切换插件jPicture ie兼容8

更新时间: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>
相关插件-幻灯片和轮播图

jQuery炫酷的相册幻灯

jQuery炫酷的相册幻灯
  幻灯片和轮播图
 29886  363

html5全屏幻灯片切换

html5全屏阶梯式图片幻灯片切换
  幻灯片和轮播图
 24914  307

jQuery反转式轮播插件roundabout.js

jQuery反转式轮播插件roundabout.js简单好用,兼容ie6
  幻灯片和轮播图
 13113  168

游戏网站轮播焦点图插件

仿flash下滑切换js焦点图
  幻灯片和轮播图
 22119  292

讨论这个项目(31)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    cmckjc 0
    2019/5/10 18:00:23
    使用方法里“dotEventType 下方按钮用来切换图片时的事件类型(click / moueseenter) ”,“ moueseenter”多写了“e”
        星空0
        2019/5/10 18:03:50
        您好,感谢您的反馈。非常感谢您的指正,已修改。
        cmckjc0
        2019/5/10 18:12:47
        自动播放不能循环播放吗?到最后一张就停下来了,另外mouseenter是不是不能和自动播放同时使用呢?
        星空0
        2019/5/10 21:04:56
        您好,自动播放是可以正常循环播放的,mouseenter 也能与之同时使用。
    回复
    ????????? 0
    2019/4/23 20:16:24
    在哪里修改可以将下面的鼠标点击切换的那个原点去掉,和将两边的箭头去掉呢?
        星空1
        2019/4/24 11:15:48

        您好,感谢您的反馈。设置 arrow: false 即可将默认箭头移除,设置 dot: false 即可将下方按钮移除。新版程序已提交

    回复
    ????????? 0
    2019/4/23 20:08:09
    能否在PC端将箭头移除呢?
        星空0
        2019/4/24 11:15:13

        您好,感谢您的反馈。设置 arrow: false 即可将默认箭头移除。新版程序已提交,待审核通过后即可查看

    回复
    ぴ安之若素° 0
    2018/6/6 4:05:00
    楼主,怎么全部图片一起出来了呢?
        星空0
        2018/6/6 9:30:41
        您好,您看一下是否按照 jpicture 规定的格式设置的,我也是按照它的方式设置的,现在已经更新了,设置方式跟之前不一样了,你可以去看一下
    回复
    vitas 0
    2017/12/11 11:41:31

    这个插件还需要改进,在屏幕比例不同的情况下,图片不会根据屏幕比例自动做调整,图片失真。

    回复
    一斤困困 0
    2017/10/24 10:05:08
    为什么只出来一张图片可以切换
        星空0
        2017/10/24 11:13:26

        您好,暂时还没遇到您说的问题,也没有用户反馈过类似问题,您看看是否您的程序写的存在问题,或者将您的代码发给我,我帮您看看

        一斤困困0
        2017/10/24 13:43:08

        那这个插件的图片高宽度是指定的吗?我现在要切换的图片是要从数据库查出来的,类似于qq聊天记录里的图片左右切换

        星空0
        2017/10/24 18:40:46

        图片的外层容器一定要设置固定的宽高,里面的图片会根据这个宽高自动附上尺寸

        0
        2017/11/8 15:29:02

        我滑动也是只有一张图

    回复
    ?? 0
    2017/10/23 15:55:59

    base64,iVBORw0KGgoAAAAN.....)   这一段是什么意思

        星空1
        2017/10/23 15:58:31

        您好,样式表中的这段代码是左右切换箭头的图片,这是将图片以 base64 转码后再通过 background 引入的

    回复
    古迹 0
    2017/8/30 15:27:35

    您好,刷新页面,轮播所有的图片会闪现,然后才正常,请问大神这是怎么回事儿?怎么解决啊?

        星空1
        2017/8/30 15:30:40

        感谢您的使用,这种情况给 selector 那个参数指向的元素(就是 jPicture 第一个参数指向的那个元素)手动添加一个 overflow:hidden 的样式就可以了

    回复
    _ __老戏骨 . 0
    2017/8/23 9:33:12

    你好  jq版本和页面其他地方有冲突怎么解决

        星空0
        2017/8/23 10:13:27

        您好,jPicture 建议使用的是 jQuery v1.11.0 或以上的版本,因为在淡入淡出的效果中如果连续快速切换,v1.11.0 之前的版本会使图片的透明度出现问题。所以建议使用 v1.11.0+ 的版本。您现在的页面出现冲突是因为引入了高版本 jQuery 导致页面中的其它js程序出问题吗?你是用的是哪个版本呢?

    回复
    ぃ Ms、Liu 0
    2017/8/11 15:09:34

    请问怎么加入左右箭头,点击可以更换图片

        星空0
        2017/8/11 15:11:30
        PC 端默认就会显示左右切换箭头,移动端不可以
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复