vue组件中的轮播实现

一、直接上代码

<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