jPicture

show 直接显示

fade 淡入淡出

slide 左右滑动

# 引入脚本文件 ( jPicture 依赖 jQuery,支持 1.9.0 - 3.3.1 版本的 jQuery )
<script src="js/jquery.min.js"></script>
<script src="js/jPicture.min.js"></script>

# 设置图片容器的宽高 ( 也可在组件参数中设置 )
<style>
    #wrapper {
        width: 800px;
        height: 400px;
    }
</style>

# 设置图片容器 ( 容器内不要添加任何内容 )
<div id="wrapper"></div>

# 调用组件
<script>
    $(function () {

        // 最简单的调用方式
        $("#wrapper").jPicture([
            { src: "1.jpg" },
            { src: "2.jpg" },
            { src: "3.jpg" },
            { src: "4.jpg" }
        ]);
        
        // 全部配置参数
        // 第一个参数是图片资源,数组形式,里面的每一项都是对象形式,其中 src 必填,href 和 text 可选
        // 第二个参数是配置参数,对象形式,所有配置参数均为可选,也就是说第二个参数可以省略
        $("#wrapper").jPicture([
            { src: "1.jpg", href: "#1", text: "图片一" },
            { src: "2.jpg", href: "#2", text: "图片二" },
            { src: "3.jpg", href: "#3", text: "图片三" },
            { src: "4.jpg", href: "#4", text: "图片四" }
        ], {
            effect: "slide",          // 可选, 图片切换方式, slide(默认左右滑动), fade(淡入淡出), show(直接显示)
            duration: 900,            // 可选, 切换动画的过渡时间, 单位:ms, 默认:750, 只对 slide 和 fade 生效
            showArrow: true,          // 可选, 是否显示左右切换箭头, true(默认) 或 false
            showDot: true,            // 可选, 是否显示下方切换按钮, true(默认) 或 false
            dotShape: "square",       // 可选, 下方切换按钮的形状, circle(默认圆点), square(方框), line(线形)
            dotAlign: "right",        // 可选, 下方切换按钮的对齐方式, center(默认居中), left(居左), right(居右)
            dotWrapper: true,         // 可选, 下方切换按钮是否添加一个包裹层, false(默认) 或 true
            dotMargin: 8,             // 可选, 下方切换按钮的按钮间距, 数字类型,单位:px,默认为 5px
            dotDefaultColor: "#000",  // 可选, 下方切换按钮的默认颜色,默认:rgba(0, 0, 0, .5)
            dotActiveColor: "#fff",   // 可选, 下方切换按钮选中状态时的颜色,默认:rgba(255, 255, 255, 1)
            autoplay: 5000,           // 可选, 自动切换时间间隔, 单位:ms, 默认: 5000, 设置为 false 则不进行自动切换
            useTransform: true,       // 可选, 针对 slide 切换方式, 是否使用 transform 形式, 默认:false
            eventType: "mouseenter",  // 可选, 对于底部切换按钮, 自定义事件触发类型, 默认:click
            width: 800,               // 可选, 设置容器宽度, 单位:px, 默认不设置, 也可在样式表中通过 css 设置, 但此处有最高优先级
            height: 400               // 可选, 设置容器高度, 单位:px, 默认不设置, 也可在样式表中通过 css 设置, 但此处有最高优先级
        });

    })
</script>
下载 jPicture v3.0.2