jPicture 轮播图

show 直接显示

fade 淡入淡出

slide 左右滑动

组件声明式

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

        <picture-container id="component-1">
            <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 id="component-2">
            <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 id="component-3">
            <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>
        <script>

            // show 直接显示
            jPicture.component("#component-1", {
                effect: "show",
                height: 200
            });

            // fade 淡入淡出
            jPicture.component("#component-2", {
                effect: "fade",
                height: 200
            });

            // slide 左右滑动
            jPicture.component("#component-3", {
                effect: "slide",
                height: 200
            });
        </script>

    </body>
</html>


show 直接显示

fade 淡入淡出

slide 左右滑动

脚本调用式

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

        <div id="wrapper-1"></div>
        <div id="wrapper-2"></div>
        <div id="wrapper-3"></div>

        <script src="jquery.min.js"></script>
        <script src="jpicture.min.js"></script>

        <script>

            // show 直接显示
            jPicture.config("#wrapper-1", [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" }
            ], {
                effect: "show",
                height: 300
            });

            // fade 淡入淡出
            jPicture.config("#wrapper-2", [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" }
            ], {
                effect: "fade",
                height: 300
            });

            // slide 左右滑动
            jPicture.config("#wrapper-3", [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" }
            ], {
                effect: "slide",
                height: 300
            });
        </script>

    </body>
</html>


自定义箭头元素

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

        <div id="wrapper-4"></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" ],
                height: 300
            });
        </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"></div>
        <div id="current-dot">
            <i class="active"></i>
            <i></i>
            <i></i>
            <i></i>
        </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",
                height: 300
            });
        </script>

    </body>
</html>
属性 说明 类型 默认值
height 图片高度，单位：px，也可在样式表中设置，默认以父容器高度为准 Number 自动高度
effect 切换效果（ show / fade / slide ） String slide
duration 图片切换的过渡时间，单位：ms Number 800
arrow 左右箭头（ true / false / [ "", "" ] ）
不设置或设置为 true 则显示默认的内置箭头；
设置为 false 则移除默认箭头；
设置为数组形式则为自定义箭头。		 Boolean / Array true
dot 下方按钮（ true / false / "" ）
不设置或设置为 true 则显示默认的内置按钮；
设置为 false 则移除默认按钮；
设置为字符形式（即:传入选择器）则为自定义按钮。		 Boolean / String true
dotAlign 下方按钮的对齐方式（ left / center / right ）只对默认的内置按钮生效 String center
autoplay 轮播图自动切换的时间间隔，单位：ms Number 不开启
dotEventType 下方按钮用来切换图片时的事件类型（click / moueseenter） String click
下载 jPicture v4.1.0