一、直接上代码

<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

vue组件中的轮播实现的更多相关文章

  1. 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

    后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...

  2. 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

    在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...

  3. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  4. android中广告轮播图总结

    功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...

  5. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  6. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  7. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  8. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  9. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

随机推荐

  1. 【最小割】【网络流24题】【P2762】 太空飞行计划问题

    Description W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,-,Em},和进行这些实验需要使 ...

  2. 【树状数组】【P4113】[HEOI2012]采花

    Description 给定一个长度为 \(n\) 的序列,有 \(m\) 次询问,每次询问一段区间,求区间中有多少个数出现次数超过 \(1\) 次 Limitation \(n,~m~\leq~2~ ...

  3. ASP.NET MVC开发,编辑页面和添加页面基本相同,我们控制器 Add Edit是共用同一个View吗?

    http://q.cnblogs.com/q/51693/ 这种的话,一般公用就好了.,如下的写法: [HttpGet] public ActionResult UserManage(int user ...

  4. ACF/PACF,残差白噪声的检验问题

    关于自相关.偏自相关: 一.自协方差和自相关系数       p阶自回归AR(p)       自协方差 r(t,s)=E[X(t)-EX(t)][X(s)-EX(s)]       自相关系数ACF ...

  5. unity脚本封装成dll

    先申明一下这样做是有需要的.当我们需要把脚本提供给第三方使用,而又不希望对方看到具体的实现过程,这时候就需要将代码封装编译成dll文件,供第三方调用.或是多个项目都要用到同一个模块或同样的功能,则可以 ...

  6. Java poi读取,写入Excel2007

    Java poi读取,写入Excel2007 相关阅读:poi读写Excel2003:http://www.cnblogs.com/gavinYang/p/3576739.htmljxl读写excel ...

  7. Shell记录-Shell脚本基础(五)

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  8. A Gentle Guide to Machine Learning

    A Gentle Guide to Machine Learning Machine Learning is a subfield within Artificial Intelligence tha ...

  9. [整理]document.execCommand()

    http://msdn.microsoft.com/en-us/library/ms533049%28VS.85%29.aspx http://blog.csdn.net/lhrhi/article/ ...

  10. 20155235 2016-2017-2 《Java程序设计》第六周学习总结

    20155235 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 InputStream与OutputStreaam 串流设计的概念 串流继承架构 川 ...