基于 VueJS 的轮播图插件 Vueslideshow。这是一个在浏览器端使用的且完全基于 VueJS 的轮播图组件，可通过 “组件声明式” 和 “脚本调用式” 两种方法实现轮播图功能。依赖资源 Vue 2.2.0+。
使用方法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>
