vue 淡入淡出组件

<!--首页轮播图-->

<template>

<div class="m-banner-wrap" :style="`width: ${width}; height: ${height}`" v-if="bannerData.length">

<div class="m-banner-list">

<div

class="u-banner-item fade"

v-for="(item, index) in bannerData"

:key="index"

v-show="index===activeIndex"

:style="`background: url(${item.imgUrl}) no-repeat center; background-size: cover;`"

@mouseenter="onStop" @mouseleave="onStart">

<a :href="item.link" target="_blank"></a>

</div>

</div>

</div>

</template>

<script>

export default {

name: 'Banner',

props: {

bannerData: { // banner数组

type: Array,

default: () => {

return []

}

},

interval: { // 切换间隔ms

type: Number,

default: 3000

},

width: { // 宽度

type: String,

default: '100%'

},

height: { // 高度

type: String,

default: '600px'

}

},

data () {

return {

activeIndex: 0,

timer: null

}

},

mounted () {

setTimeout(() => {

this.onStart()

}, 1000)

window.onfocus = () => { // 页面激活

this.onStart()

}

window.onblur = () => { // 页面失焦

this.onStop()

}

},

methods: {

onStart () {

clearInterval(this.timer)

if (this.bannerData.length > 1) {

this.timer = setInterval(this.onMove, this.interval)

}

},

onStop () {

clearInterval(this.timer)

},

onEnter (index) {

clearInterval(this.timer)

this.activeIndex = index

this.onStart()

},

onMove () {

if (this.activeIndex === this.bannerData.length - 1) {

this.activeIndex = 0

} else {

this.activeIndex++

}

}

},

beforeDestroy () {

clearInterval(this.timer)

this.timer = null

}

}

</script>

<style lang="less" scoped>

@themeColor: #1890FF;

.m-banner-wrap {

width: 100%;

height: 585px;

min-width: 1200px;

margin: 0 auto;

overflow: hidden;

position: relative;

z-index: 9;

.m-banner-list {

height: 100%;

.u-banner-item {

min-width: 1200px;

height: 100%;

width: 100%;

a {

display: block;

height: 100%;

}

}

.fade { // 切换banner时的过渡效果

-webkit-animation: fadein linear 6s;

animation: fadein linear 6s;

-webkit-animation-duration: 6s;

-moz-animation: fadein linear 6s;

-o-animation: fadein linear 6s;

-ms-animation: fadein linear 6s;

}

@-webkit-keyframes fadein {

0% {

opacity: 0;/*初始状态 透明度为0*/

}

50% {

opacity:1;/*中间状态 透明度为1*/

}

100% {

opacity: 0;/*结尾状态 透明度为0*/

}

}

@keyframes fadein {

0% {

opacity: 0;

}

50% {

opacity:1;

}

100% {

opacity: 0;

}

}

@-ms-keyframes fadein {

0% {

opacity: 0;

}

50% {

opacity:1;

}

100% {

opacity: 0;

}

}

@-o-keyframes fadein {

0% {

opacity: 0;

}

50% {

opacity:1;

}

100% {

opacity: 0;

}

}

@-webkit-keyframes fadein {

0% {

opacity: 0;

}

50% {

opacity:1;

}

100% {

opacity: 0;

}

}

@-moz-keyframes fadein {

0% {

opacity: 0;

}

50% {

opacity:1;

}

100% {

opacity: 0;

}

}

}

.m-dot-list {

width: 100%;

line-height: 4px;

position: absolute;

bottom: 65px;

text-align: center;

.u-dot-item { // 圆点样式

display: inline-block;

width: 36px;

height: 4px;

background: #E3E3E3;

border-radius: 1px;

vertical-align: bottom;

cursor: pointer;

&:not(:last-child) {

margin-right: 10px;

}

}

.active { // 圆点选中样式

background: @themeColor;

}

}

}

</style>

//引用页面