文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue实现首页banner自动轮播效果

2024-04-02 19:55

关注

本文实例为大家分享了Vue实现首页banner自动轮播的具体代码,供大家参考,具体内容如下

效果如图:

 ①创建Banner.vue组件,需传入banner数组,可设置轮播间隔ms

<template>
  <div class="m-banner-wrap" 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.tupian}) no-repeat; background-size: cover;`"
        @mouseover="onOver()" @mouseout="onOut()">
        <a :href="item.link"></a>
      </div>
    </div>
    <div class="m-dot-list" v-if="bannerData.length > 1">
      <div v-for="(item, index) in bannerData" :key="index" :class="['u-dot-item', {active: index===activeIndex}]" @mouseenter="onEnter(index)" @mouseleave="onLeave">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Banner',
  props: {
    bannerData: { // banner数组
      type: Array,
      default: () => {
        return []
      }
    },
    interval: { // 切换间隔ms
      type: Number,
      default: 3000
    }
  },
  data () {
    return {
      activeIndex: 0,
      timer: null
    }
  },
  mounted () {
    setTimeout(() => {
      this.startSlider()
    }, 1000)
  },
  methods: {
    onOver () {
      clearInterval(this.timer)
    },
    onOut () {
      this.startSlider()
    },
    onEnter (index) {
      this.activeIndex = index
      clearInterval(this.timer)
    },
    onLeave () {
      this.startSlider()
    },
    startSlider () {
      clearInterval(this.timer)
      if (this.bannerData.length > 1) {
        this.timer = setInterval(this.onMove, this.interval)
      }
    },
    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>
@mainColor: #108ee9;
.m-banner-wrap {
  width: 100%;
  height: 600px;
  min-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  .m-banner-list {
    height: 600px;
    .u-banner-item {
      min-width: 1200px;
      height: 600px;
      width: 100%;
      a {
        display: block;
        height: 100%;
      }
    }
    .fade {
      animation: fade 0.5s ease-in-out; // 切换banner时的过渡效果
    }
    @keyframes fade {
      0% {opacity:0;}
      5% {opacity:0.05;}
      10% {opacity:0.1;}
      20% {opacity:0.2;}
      35% {opacity:0.35;}
      50% {opacity:0.5;}
      65% {opacity:0.65;}
      80% {opacity:0.8;}
      90% {opacity:0.9;}
      95% {opacity:0.95;}
      100%{opacity:1;}
    }
  }
  .m-dot-list {
    width: 600px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -300px;
    text-align: center;
    .u-dot-item { // 圆点样式
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 0 5px;
      background: #fff;
      cursor: pointer;
      border: 1px solid #fff;
      border-radius: 50%;
      opacity: 0.8;
    }
    .active { // 圆点选中样式
      width: 30px;
      background: @mainColor;
      border: 1px solid @mainColor;
      border-radius: 12px;
      opacity: 1;
    }
  }
}
</style>

②在要使用的页面引入

<Banner :bannerData="bannerData" :interval="3000"/>
import Banner from '@/components/Banner'
components: {
    Banner
}
data () {
    return {
      bannerData: [
        {
          link: '跳转地址...',
          src: '图片地址...'
        },
        {
          link: '跳转地址...',
          src: '图片地址...'
        },
        {
          link: '跳转地址...',
          src: '图片地址...'
        }
      ]
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯