Vue 走马灯实现

最新推荐文章于 2025-03-04 23:27:12 发布

隔壁的橘猫

最新推荐文章于 2025-03-04 23:27:12 发布

阅读量535

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/one_only_blue/article/details/108963121

这篇博客详细介绍了如何在Vue项目中使用Element UI库的carousel组件来创建一个轮播图，包括设置轮播间隔、类型、高度，并通过v-for指令绑定图片数组。同时，文章还提及了require关键字在导入静态资源时的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果:
在这里插入图片描述

官网组件:https://element.eleme.cn/#/zh-CN/component/installation

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="(img, index) in imgArrag" :key="index">
      <a href="#">
        <img :src="img" alt="" width="100%" />
      </a>
      <router-view></router-view>
    </el-carousel-item>
  </el-carousel>
</template>
<script>
export default {
  data() {
    return {
      imgArrag: [
        require("../static/003.jpg"),
        require("../static/004.jpg"),
        require("../static/005.jpg"),
        require("../static/006.jpg"),
        require("../static/007.jpg"),
        require("../static/008.jpg"),
      ],
    };
  },
  methods: {},
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>