jPicture

show 直接显示

fade 淡入淡出

slide 左右滑动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jPicture Demo</title>
    </head>
    <body>

        <!-- 组件式调用 -->
        <picture-container width="310" height="180" effect="show">
            <picture-box src="1.jpg"></picture-box>
            <picture-box src="2.jpg"></picture-box>
            <picture-box src="3.jpg"></picture-box>
            <picture-box src="4.jpg"></picture-box>
        </picture-container>

        <picture-container width="310" height="180" effect="fade">
            <picture-box src="1.jpg"></picture-box>
            <picture-box src="2.jpg"></picture-box>
            <picture-box src="3.jpg"></picture-box>
            <picture-box src="4.jpg"></picture-box>
        </picture-container>

        <picture-container width="310" height="180" effect="slide">
            <picture-box src="1.jpg"></picture-box>
            <picture-box src="2.jpg"></picture-box>
            <picture-box src="3.jpg"></picture-box>
            <picture-box src="4.jpg"></picture-box>
        </picture-container>

        <!-- 调用脚本文件 -->
        <script src="jquery.min.js"></script>
        <script src="jpicture.min.js"></script>

    </body>
</html>


show 直接显示

fade 淡入淡出

slide 左右滑动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jPicture Demo</title>
    </head>
    <body>

        <!-- 脚本式调用 -->
        <div id="wrapper-1" width="310" height="180"></div>
        <div id="wrapper-2" width="310" height="180"></div>
        <div id="wrapper-3" width="310" height="180"></div>

        <!-- 调用脚本文件 -->
        <script src="jquery.min.js"></script>
        <script src="jpicture.min.js"></script>

        <!-- 设置脚本 -->
        <script>
            jPicture.config("#wrapper-1", [
                { src: "1.jpg", href: "#1", title: "图片一" },
                { src: "2.jpg", href: "#2", title: "图片二" },
                { src: "3.jpg", href: "#3", title: "图片三" },
                { src: "4.jpg", href: "#4", title: "图片四" }
            ], {
                effect: "show",
                dotAlign: "right"
            });

            jPicture.config("#wrapper-2", [
                { src: "1.jpg", href: "#1", title: "图片一" },
                { src: "2.jpg", href: "#2", title: "图片二" },
                { src: "3.jpg", href: "#3", title: "图片三" },
                { src: "4.jpg", href: "#4", title: "图片四" }
            ], {
                effect: "fade",
                dotAlign: "right"
            });

            jPicture.config("#wrapper-3", [
                { src: "1.jpg", href: "#1", title: "图片一" },
                { src: "2.jpg", href: "#2", title: "图片二" },
                { src: "3.jpg", href: "#3", title: "图片三" },
                { src: "4.jpg", href: "#4", title: "图片四" }
            ], {
                effect: "slide",
                dotAlign: "right"
            });
        </script>

    </body>
</html>


自定义箭头元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jPicture Demo</title>
    </head>
    <body>

        <!-- 脚本式调用 -->
        <div id="wrapper-4" width="100%" height="300"></div>
        <button type="button" id="prev">上一张</button>
        <button type="button" id="next">下一张</button>

        <!-- 调用脚本文件 -->
        <script src="jquery.min.js"></script>
        <script src="jpicture.min.js"></script>

        <!-- 设置脚本 -->
        <script>
            jPicture.config("#wrapper-4", [
                { src: "1.jpg" },
                { src: "2.jpg" },
                { src: "3.jpg" },
                { src: "4.jpg" }
            ], {
                arrow: [ "#prev", "#next" ]
            });
        </script>

    </body>
</html>


自定义按钮元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jPicture Demo</title>
        <style>
            #current-dot{text-align:center;margin:15px auto}
            #current-dot i{display:inline-block;margin:0 5px;width:14px;height:14px;border-radius:7px;background:#000}
            #current-dot i.active{background:#aaa}
        </style>
    </head>
    <body>

        <!-- 脚本式调用 -->
        <div id="wrapper-5" width="100%" height="300"></div>
        <div id="current-dot"></div>

        <!-- 调用脚本文件 -->
        <script src="jquery.min.js"></script>
        <script src="jpicture.min.js"></script>

        <!-- 设置脚本 -->
        <script>
            jPicture.config("#wrapper-5", [
                { src: "1.jpg" },
                { src: "2.jpg" },
                { src: "3.jpg" },
                { src: "4.jpg" }
            ], {
                dot: "#current-dot"
            });
        </script>

    </body>
</html>
属性 说明 类型 默认值
width 图片宽度 Number 100%
height 图片高度 Number 自动高度
effect 切换效果( show / fade / slide ) String slide
duration 图片切换的过渡时间 Number 700
arrow 左右箭头( true / false / [ "#demo-prev", "#demo-right" ] ) Boolean / Array true
dot 下方按钮( true / false / "#demo-dot" ) Boolean / Array true
dotAlign 下方按钮的对齐方式( left / center / right )只对默认按钮生效 String center
autoplay 自动播放时间间隔 Number 未开启
eventType 下方按钮用来切换图片时的事件类型(click / moueseenter / mouseleave) String click
下载 jPicture v4.0.0