demo示例躯肌，待完善
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Carousel demo</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.slide {width: 100%;height: 320px;margin: 0 auto;margin-top: 50px;overflow: hidden;position: relative;}
.slideshow {width: 100%;height: 320px;}
li {position: absolute;}
img {width: 100%;height: 320px;}
.active {background: red !important;}
.image-enter-active {transform: translateX(0);transition: all 1s ease; }
.image-leave-active {transform: translateX(-100%);transition: all 1s ease;}
.image-enter {transform: translateX(100%); }
.image-leave {transform: translateX(0);}
.dot{position: absolute;bottom: 0;padding: 10px;left: 50%;transform: translateX(-50%);z-index: 999;}
.dot span{display: inline-block;margin-right:10px;width: 10px;height: 10px;background-color: #ff8400;border-radius: 50%;cursor: pointer;}
</style>
</head>
<body>
<script type="text/x-template" id="carousel-temp">
<div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
<div class="slideshow">
<transition-group tag="ul" name="image">
<li v-for="(img, index) in imgs" v-show="index===current" :key="index">
<a href="#">
<img :src='img'>
</a>
</li>
</transition-group>
</div>
<div class="dot">
<span v-for="(item, index) in imgs" :class="{ 'active':index===current }" @click="change(index)" :key="index"></span>
</div>
</div>
</script>
<script type="text/javascript">
var component = {
props:['imgs'],
template:'#carousel-temp',
data:function(){
return {
timer:null,
changeTime:0,
current:0
}
},
methods: {
autoPlay:function() {
this.current++;
if (this.current === this.imgs.length) {
this.current = 0
}
},
play:function() {
this.timer = setInterval(this.autoPlay, 2500)
},
change:function(i) {
//防止過頻點擊，導致空白交替問題
var time = +new Date();
window.console && console.log(time - this.changeTime);
if(this.changeTime != 0 && time - this.changeTime < 1050) return;
this.current = i;
this.changeTime = +new Date();
},
stop:function() {
clearInterval(this.timer);
this.timer = null;
},
move:function() {
if(this.timer) this.stop();
this.timer = setInterval(this.autoPlay, 2500)
}
},
mounted:function(){
this.play();
//防止頁面失去焦點后setInterval停止運行赂苗，頁面獲得焦點時連續(xù)執(zhí)行
window.onblur = function() { this.stop() }.bind(this)
window.onfocus = function() { this.play() }.bind(this)
}
}
Vue.component('carousel',component);
</script>
<div id="app">
<carousel :imgs="imgArray"></carousel>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
imgArray:[
'https://xx1.jpg',
'https://xx.jpg',
'https:/xx.jpg',
'https://xx.png'
]
}
})
</script>
</body>
</html>
