如何实现element-ui多张图片加文字轮播

要实现element-ui多张图片加文字轮播，可以使用element-ui中的Carousel（走马灯）组件。

首先，需要在页面中引入element-ui的Carousel组件，并在组件中设置图片和文字。

示例代码如下：

<el-carousel :interval="3000">
  <el-carousel-item v-for="(item, index) in items" :key="index">
    <img :src="item.imageUrl">
    <div class="item-text">{{item.title}}</div>
  </el-carousel-item>
</el-carousel>

其中，items是一个数组，每个元素代表一个轮播项，包括图片的URL和标题。

接着，可以在样式中设置图片和文字的样式，如下：

.item-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

最后，通过设置interval属性来控制轮播的间隔时间。

完整代码示例：

<template>
  <el-carousel :interval="3000">
    <el-carousel-item v-for="(item, index) in items" :key="index">
      <img :src="item.imageUrl">
      <div class="item-text">{{item.title}}</div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { imageUrl: 'https://picsum.photos/id/237/800/300', title: '图片1' },
        { imageUrl: 'https://picsum.photos/id/238/800/300', title: '图片2' },
        { imageUrl: 'https://picsum.photos/id/239/800/300', title: '图片3' },
        { imageUrl: 'https://picsum.photos/id/240/800/300', title: '图片4' },
      ],
    };
  },
};
</script>

<style scoped>
.item-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
</style>