vue組件中的輪播實現

1、直接上代碼

<template>
<el-row class="Slide">
	<el-row class="title">{{i18n[$lang].title}}</el-row>
	<el-row class="sub-title">{{i18n[$lang].subTitle}}!</el-row>
	<el-row class="slide-content" @mouseenter.native="onStop" @mouseleave.native="onStart">
		<img class="content-img" :src="`${$url.aliyun}${contents[selected-1].img}`" :alt="contents[selected-1].content.title">
		<el-col class="content">
			<el-row class="content-title">{{contents[selected-1].content.title | capitalize(true)}}<span>-{{contents[selected-1].name}}</span></el-row>
			<el-row class="content-article">{{contents[selected-1].content.article}}</el-row>
			<router-link class="router" :to="`/${$route.meta.lang}/login`">{{$t("common.readMore") | upperCase}}</router-link>
		</el-col>
	</el-row>
	<el-row class="slide-controll">
		<button v-for="(content,index) in contents" :class="{selected:selected===index+1}" @mouseenter="onSelect(index)" @mouseleave="onStart">{{content.name}}</button>
	</el-row>
</el-row>
</template>

<script>
	export default {
		data() {
			return {
				i18n: {
					en: {
						title: 'Functional Introduction',
						subTitle: 'GIPC, GIIC, GIRC help you to complete your investment quickly'
					},
					cn: {
						title: '功能介紹',
						subTitle: 'GIPC, GIIC, GIRC助您快速完成您的投資'
					}
				},
				contents: [{
					name: 'GIPC',
					img: '/static/img/home/GIPC.png',
					content: {
						title: 'global investment project cloud',
						article: 'Global SME CEOs are major users. 100% Projects have been reviewed by PNC. At the same time, CEOs can upload their own projects automatically to the platform. Global financing and markets are their focus'
					}
				}, {
					name: 'GIIC',
					img: '/static/img/home/GIIC.png',
					content: {
						title: 'global investment investor cloud',
						article: 'The investor pool consists mainly of Chinese investors. Introductions on the ability, background, current situation and development of investors are made to ensure that users can find the fittest investors in the shortest period of time'
					}
				}, {
					name: 'GIRC',
					img: '/static/img/home/GIRC.png',
					content: {
						title: 'global investment report cloud',
						article: 'Providing you with Macro Industry Analysis, Case Analysis, and Corporate Valuation Reports Exclusive Customized Report across the globes'
					}
				}],
				selected: 1,
				timer: null,
				speed: 5000
			};
		},
		mounted() {
			this.onStart();
		},
		methods: {
			onNext() {
				this.selected = this.selected >= this.contents.length ? 1 : this.selected + 1;
			},
			onStart() {
				this.timer = this.contents.length > 1 ? setInterval(this.onNext, this.speed) : null;
			},
			onStop() {
				clearInterval(this.timer);
			},
			onSelect(index) {
				this.onStop();
				this.selected = index + 1;
			}
		},
		beforeDestroy() {
			this.onStop();
		}
	};

　　注意：

1. mouseenter： 在鼠標光標從元素外部首次移動到元素範圍以內時觸發。這個事件不冒泡，並且在光標移動到元素的後代元素上不會觸發。
2. mouseleave： 在鼠標光標從元素內部首次移動到元素範圍以外時觸發。這個事件不冒泡，並且在光標移動到元素的後代元素上不會觸發。
3. mouseover   :  在鼠標指針位於一個元素外部，而後用戶將其首次移入該元素內部時觸發。（外部包括元素的子元素，元素的父元素，元素的相鄰元素等）
4. mouseout   :  在鼠標指針位於一個元素內部，而後用戶將其首次移至外部時觸發。（外部包括元素的子元素，元素的父元素，元素的相鄰元素等）

5. setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。

   setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

   提示： 1000 毫秒= 1 秒。

   提示： 若是你只想執行一次能夠使用 setTimeout() 方法。http://www.runoob.com/jsref/met-win-setinterval.html