VueJS轮播图插件Vueslideshow (原创)

 查看演示  website  立即下载

VueSlideShow - 基于 Vue 的轮播图组件

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

依赖资源

Vue 2.2.0+

兼容情况

chrome36+, firefox16+, safari9+, edge15+, ie10+。

用法：

有两种使用方法：

1. 组件声明式

2. 脚本调用式

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

1. 组件声明式：

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

2. 脚本调用式：

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

淡入淡出效果

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

自定义左右箭头

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

自定义下方按钮

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

隐藏左右箭头

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

隐藏下方按钮

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

自动切换

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

PREVIOUS:
NEXT:
CSS3 3D立方体旋转展示动画
仿某支付网模板