<div class="n-slide"><div class="n-slide-container" :style="{height: height}"><slot></slot></div>
</div>
.n-slide-container {position: relative;overflow: hidden;}

<template><div v-show="ready" :class="['n-slide-item',{animating}]" :style="translateStyle"><slot></slot></div>
</template>
.n-slide-item {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: 0;&.animating {transition: transform 0.4s ease-in-out;}}

<script>export default {name: 'Slide',props: {loop: {type: Boolean,default: true},autoplay: {type: Boolean,default: true},height: String,interval: {type: Number,default: 3000},initialIndex: {type: Number,default: 0}},}

data() {return {items: [],}
},
methods: {upDataItems() {this.items = this.$children.filter(child => child.$options.name === 'NSlideItem')}}

created() {this.$parent && this.$parent.upDataItems()}

mounted() {// 为了确保幻灯片加载完this.upDataItems()// $nextTick是把执行逻辑放入Vue的异步队列中，等Vue的事件初始化完成后才会执行，为了正确的给activeIndex赋值，否则初始化轮播为最后一张this.$nextTick(() => {if (this.initialIndex < this.items.length && this.initialIndex >= 0) {this.activeIndex = this.initialIndex;}// 打开定时器this.startTimer();});},
data: {items: [],timer: null,initIndex: 0, // 初始的indexactiveIndex: -1 // 滚动的index
},
methods: {startTimer() {this.timer = setInterval(this.playSlides, this.interval)},playSlides() {const items = this.items// 轮播滚动到最后一个就循环if (items.length && this.activeIndex < items.length - 1) {this.activeIndex++} else if (this.loop) {this.activeIndex = 0}},
},

watch: {autoplay(val) {if (val) {this.startTimer()}},activeIndex(activeIndex, oldIndex) {// 重新更新幻灯片的位置(主要函数)this.resetPositionItems(activeIndex, oldIndex)}},methods: {resetPositionItems(activeIndex, oldIndex) {this.items.forEach((item, index) => {item.initTranslate(index, activeIndex, oldIndex)})},}

name: 'NSlideItem',
data() {return {translate: 0,ready: false,animating: false}
},
methods: {// 处理循环轮播processIndex(index, activeIndex, length) {// 如果是最后一张都第一张if (activeIndex === 0 && index === length - 1) {return -1;// 如果是第一张到对后一张} else if (activeIndex === length - 1 && index === 0) {return length;} else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {return length + 1;} else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {return -2;}return index;},initTranslate(index, activeIndex, oldIndex) {const length = this.$parent.items.length;if (index !== activeIndex && length > 2 && this.$parent.loop) {index = this.processIndex(index, activeIndex, length);}this.animating = activeIndex === indexthis.translate = this.calcTranslate(index, activeIndex)// 组件初始化完this.ready = true},// 计算位移的距离，重点就是这个函数calcTranslate(index, activeIndex) {// 获取父组件的宽度const distance = this.$parent.$el.offsetWidth// 可以仔细思考下这个计算return distance * (index - activeIndex)}}
},
computed: {translateStyle() {// this.translate变化时,返回对应的stylereturn {transform: `translateX(${this.translate}px)`}}
},
created() {this.$parent && this.$parent.upDataItems()
}

<template><div style="width: 500px"><n-slide height="400px"><n-slide-item v-for="(item,index) of ['red','grey','black','orange']"><div class="item" :style="{height: '100%',background: item,color: '#ffffff',fontSize: '30px'}">{{index+1}}</div></n-slide-item></n-slide></div>
</template>