Vue首页banner轮播

置顶 theMuseCatcher

已于 2022-10-27 10:05:21 修改

阅读量2.4k

点赞数 1

分类专栏： Vue2 js 文章标签： javascript less vue.js

于 2021-07-27 14:00:21 首次发布

本文链接：https://blog.csdn.net/Dandrose/article/details/119142292

版权

js 同时被 2 个专栏收录

40 篇文章 3 订阅

订阅专栏

38 篇文章 5 订阅

订阅专栏

可自定义设置以下属性：

banner数组（bannerData）
切换间隔（interval），默认3000ms
宽度（width），默认100%
高度（height），默认600px

效果如图：

①创建Banner.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 class="m-dot-list" v-if="bannerData.length > 1">
      <div v-for="n of bannerData.length" :key="n" :class="['u-dot-item', {active: (n-1)===activeIndex}]" @mouseenter="onEnter(n-1)">
      </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 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      animation: fadein 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
    @-webkit-keyframes fadein {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fadein {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
  .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>

②在要使用的页面引入：

<Banner :bannerData="bannerData" :interval="3000"/>
import Banner from '@/components/Banner'
components: {
    Banner
}
bannerData: [
    {
        title: 'image-1',
        link: 'javascript:;',
        imgUrl: require('@/assets/images/1.jpg')
    },
    {
        title: 'image-2',
        link: 'javascript:;',
        imgUrl: require('@/assets/images/2.jpg')
    },
    {
        title: 'image-3',
        link: 'javascript:;',
        imgUrl: require('@/assets/images/3.jpg')
    }
]