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

使用方法

组件声明式

<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>

脚本调用式

<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>

组件示例

下面的示例将以 “组件调用式” 进行演示

左右滑动效果

<div id="app-1" style="width:470px;height:200px;">
    <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-1",
        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>

淡入淡出效果

<div id="app-2" style="width:470px;height:200px;">
    <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-2",
        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>

自定义左右箭头

<div id="app-3" style="width:470px;height:200px;">
    <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-3",
        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>

自定义下方按钮

<style>
    #custom-dot {
        margin: 25px 0 0 0;
    }
    #custom-dot i {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #ddd;
        border-radius: 50%;
        cursor: pointer;
        margin: 0 10px;
        transition: .2s;
    }
    #custom-dot i.active {
        background: #222;
    }
</style>

<div id="app-4" style="width:470px;height:200px;">
    <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-4",
        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>

隐藏左右箭头

<div id="app-5" style="width:470px;height:200px;">
    <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-5",
        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>

隐藏下方按钮

<div id="app-6" style="width:470px;height:200px;">
    <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-6",
        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>

自动切换

<div id="app-7" style="width:100%;height:250px;">
    <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-7",
        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>