简言

这是一个在浏览器端使用的且完全基于 VueJS 的轮播图组件，可通过 “组件声明式” 和 “脚本调用式” 两种方法实现轮播图功能。

用法

有两种使用方法：

  1. 组件声明式
  2. 脚本调用式

两种方法只是在调用形式上略有差别，参数配置完全相同，可根据实际情况和个人喜好选择合适的方式。

组件声明式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
   
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                autoplay: 5000,
                arrow: true,
                dot: true
            }
        }
    });
</script>

脚本调用式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app" style="width:600px;height:300px;"></div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue().VueSlideShow("#app", {
        images: [
            { src: "1.jpg", href: "#1" },
            { src: "2.jpg", href: "#2" },
            { src: "3.jpg", href: "#3" },
            { src: "4.jpg", href: "#4" },
            { src: "5.jpg", href: "#5" }
        ],
        config: {
            effect: "slide",
            autoplay: 5000,
            arrow: true,
            dot: true
        }
    });
</script>

左右滑动效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide"
            }
        }
    });
</script>

淡入淡出效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "fade"
            }
        }
    });
</script>

自定义左右箭头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                arrow: [ "#prev", "#next" ]
            }
        }
    });
</script>

自定义下方按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
    #custom-dot {
        width: 600px;
        text-align: center;
        margin: 10px 0 20px 0;
    }
    #custom-dot i {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #aaa;
        border-radius: 50%;
        cursor: pointer;
        margin: 0 10px;
        transition: .2s;
    }
    #custom-dot i.active {
        background: #333;
    }
</style>
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<div id="custom-dot">
    <i class="active"></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                dot: "#custom-dot"
            }
        }
    });
</script>

隐藏左右箭头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                arrow: false
            }
        }
    });
</script>

隐藏下方按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                dot: false
            }
        }
    });
</script>

自动切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                autoplay: 5000
            }
        }
    });
</script>