demo.html

<template>
    <div class="carousel" ref="carousel">
        <div class="whole">
			<div class="roll-img">
				<span class="last" @click="after" v-show="showIndex"><</span>			  
				<!-- 图片容器 -->
				<ul id="ul">
					<li v-on:click="change($event)" v-for="(item, index) in imgs" :class="classes[index]"><img :src="require(`@/assets/imgs/${item}.jpg`)" alt=""><div></div></li>
				</ul>
				<span class="next" @click="before" v-show="showIndex">></span>
			</div>
		</div>
		<div class="list">
			<!-- 指示灯 -->
			<span class="btn" v-for="(item, index) in classes" :key="index" :class="[item == 'center' ? 'active' : '']"></span>
		</div>
    </div>
</template>
 
<script>
export default {
	data: function() {
		return {
			showIndex : false, // 是否显示左右按钮
			imgs: ['1', '2', '3', '4', '5', '6'], // 图片库
			classes: ['left', 'center', 'right', 'after1', 'after2', 'after3']			,
			timer : null
		}
	},
	methods:{
		before() {
			let last = this.classes.pop();
			this.classes.unshift(last);
		},
		after() {
			let first = this.classes.shift();
			this.classes.push(first);
		},
		change(e) {
			if(e.target.parentNode.classList.contains('left')) {
				this.after();
			} else if (e.target.parentNode.classList.contains('right')) {
				this.before()
			} else {
				return false;
			}
		}
	},
	mounted() {
		var that = this;
		this.$refs.carousel.addEventListener('mouseover', function() {
			that.showIndex = true;
			clearInterval(that.timer)
		})
		this.$refs.carousel.addEventListener('mouseout', function() {
			that.showIndex = false;
			that.timer = setInterval(() => {
				that.before();
			}, 2000)
		})
		this.timer = setInterval(() => {
			this.before();
		}, 2000)
	},
	beforeDestroy() { 
		clearInterval(this.timer)
	}
}
</script>
<style lang="scss">
	.carousel {
		width: 100%;
		height: 480px;
		.whole{
			width: 70%;
			height: 100%;
			margin: 0 auto;
			.roll-img{
			    width: 100%;
			    height: 100%;
			    position: relative;
			    transform-style: preserve-3d;
				ul li{
					position: absolute;
					width: 100%;
					height: 100%;
					cursor: pointer;
				}
			}
		}
		
	}
	img{
	    width: 100%;
	    height: 100%;
	}
	        
	.left{
		left:-400px;
		transform: scale(0.8);
		z-index: 4;
		background: rgb(0,0,0);
		transition: all 0.5s ease;
	}
	.center{
		z-index: 6;
		left: 0;
		top: 0;
		bottom: 10%;
		transition: all 0.5s ease;
	}
	.right{
		left:400px;
		transform: scale(0.8);
		z-index: 4;
		background: rgb(0,0,0);
		transition: all 0.5s ease;
	}
	.left div,.right div{
		z-index: 5;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		left: 0;
		top: 0;
		transition: all 0.3s ease;
	}
	.after1,.after2,.after3{
		z-index: 3;
		left: 0;
		top: 0;
		visibility: hidden;
		transform: scale(0);
	}
	.last,.next{
		position: absolute;
		z-index: 10;
		width: 50px;
		height: 50px;
		border: 5px solid rgba(255,255,255,0.7);
		border-radius: 50px;
		font-size: 50px;
		font-weight: bold;
		text-align: center;
		line-height: 45px;
		cursor: pointer;
		top:45%;
		color: rgba(255,255,255,0.6);
	}
	.list{
		width: 30%;
		height: 5px;
		display: flex;
		margin: 0 auto;
		margin-top: 20px;
	}
	.btn{
		transition: all 0.3s ease;
		flex: 1;
		background: rgb(244,244,244);
	}
	.btn:not(:first-child){
		margin-left: 20px;
	}
	.last{
		left:-200px;
	}
	.next{
		right: -200px;
	}
	// 指示灯
	.btn.active {
		background: #f00;
	}
</style>