vue 走马灯循环显示下面的小图片

最新推荐文章于 2024-07-15 18:42:28 发布

梁小茹

最新推荐文章于 2024-07-15 18:42:28 发布

阅读量496

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46653486/article/details/127727525

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

这种效果的：
在这里插入图片描述

<el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in detailList.fileList" :key="item">
       <img :src="item.fileUrl" />
    </el-carousel-item>
</el-carousel>

// 将轮播图指示器渲染成图片
    indicatorToimage() {
        const a = document.querySelectorAll('.el-carousel__button')
        for (let b = 0; b < (this.detailList.fileList.length );) {
            if (b < this.detailList.fileList.length) {
            for (const i in this.detailList.fileList) {
                const img = document.createElement('img')
                img.src = this.detailList.fileList[i].fileUrl
                a[b].appendChild(img)
                b++
            }
            } else {
            }
        }
    },```

样式
/deep/ .el-carousel__indicators--outside {
    overflow: auto;
    .el-carousel__indicator--horizontal {
    display: table-cell;
    }
}
/* 轮播图样式 */
.el-carousel {
    width: 543px;
    img {
        width: 100%;
        height: 100%;
    }
}
/deep/ .el-carousel__container {
    height: 478px;
}
/deep/.el-carousel__button {
    width: 100px;
    height: 100px;
    img {
        width: 100%;
        height: 100%;
    }
}