jPicture - 图片切换组件

组件介绍

jPicture 是一款兼容大多数浏览器的基于 jQuery 的图片切换组件。通过极为简单的参数配置就可以轻松实现图片切换的效果。组件提供了两种切换效果,slide 左右滑动式和 fade 淡入淡出式,开发者可根据实际需求随意调用。同时库文件体积又极为轻巧,当前最新版的 jPicture 样式表和脚本文件压缩后加起来体积只有 7KB,极大的提高了文件加载速度。jPicture 支持基于 CMD 或 AMD 规范的模块化加载,当然也支持常规的全局调用。另外组件还支持移动端的触控滑动效果,实现了桌面端和移动端的跨平台支持。

兼容情况:IE7+, Chrome, Firefox, Safari, 移动端浏览器(WebKit 内核)。

最新版本:1.1.3

立即下载:点击下载

使用方法

左右滑动

<div class="box">
    <div>
        <div><img src="images/1.jpg"></div>
        <div><img src="images/2.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/4.jpg"></div> 
    </div>
</div>

<script>
    jPicture(".box", {
        type: "slide",   // slide: 左右滑动
        autoplay: 5000   // autoplay: 自动切换(间隔5秒)
    });
</script>

淡入淡出

<div class="box">
    <div>
        <div><img src="images/1.jpg"></div>
        <div><img src="images/2.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/4.jpg"></div> 
    </div>
</div>

<script>
    jPicture(".box", {
        type: "fade",   // fade: 淡入淡出
        autoplay: 5000  // autoplay: 自动切换(间隔5秒)
    });
</script>

用法解析

// 需要引入的文件,jQuery 的版本需高于 1.11.0
<link rel="stylesheet" href="css/jPicture.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jPicture.min.js"></script>

// CSS 代码(必须给目标元素定义宽高,最好再加上 overflow:hidden)
<style>
    .box {
        width: 800px;
        height: 450px;
        overflow: hidden;
    }
</style>

// HTML 代码(如需给图片加链接,只要在 <img> 标签外面加一层 <a> 标签即可,div > a > img)
<div class="box">
    <div>
        <div><img src="images/1.jpg"></div>
        <div><img src="images/2.jpg"></div>
        <div><img src="images/3.jpg"></div>
        <div><img src="images/4.jpg"></div> 
    </div>
</div>

// JavaScript 代码
<script>
    jPicture(".box", {
        type: "slide",      // 可选,图片切换方式,slide(左右滑动) 或 fade(淡入淡出,默认)
        arrow: true,        // 可选,是否显示左右切换箭头,true(默认) 或 false
        dot: true,          // 可选,是否显示下方切换按钮,true(默认) 或 false
        dotTheme: "circle", // 可选,下方切换按钮形状,circle(默认,圆形) 或 square(方条形) [ v1.1.3版新增参数 ]
        autoplay: 5000      // 可选,是否执行自动切换,单位:ms,省略此参数则不进行自动切换
    });
</script>

// 说明
(1). 最外层容器(示例中的 <div class="box"> 必须定义明确的宽高,最好再加上 overflow:hidden,防止初次加载时图片溢出);
(2). 所有配置项均为可选,若不做任何配置,则只需将 jPicture 的第二个参数设置为 {},例如:jPicture(".box", {});
(3). 在移动端会自动使用 slide 滑动效果(fade 无效),同时会自动移除左右切换箭头,也会自动移除下方切换按钮上面的点击事件。
     因为在移动端,很少会通过点击箭头和按钮来切换图片,绝大多数情况下都是通过在图片上左右滑动的方式进行切换,所以 jPicture 
     才做出了这些调整。自动切换可按照需要正常配置。也就是说,在移动端有且只有 autoplay 属性可进行配置,其它属性都会调用内部
     默认的配置。

更新历史