vue中elementui的el-carousel走马灯轮播图片

最新推荐文章于 2025-03-26 15:28:30 发布

sing__star

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量3.8k

点赞数 4

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

本文链接：https://blog.csdn.net/qq_44774831/article/details/116057305

版权

vue.js 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何使用Vue.js配合Element UI库创建一个带有定时切换功能的轮播图片组件，通过<img>标签加载本地和路径图片，并展示了CSS样式定制和数据绑定关键代码。

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

轮播图片

放在<template中

// interval可以调节轮播时间
<el-card>
	 <el-carousel :interval="2000" type="card" height="250px">
	    <el-carousel-item v-for="item in imgList" :key="item">
	        <img :src="item.img" style="height:100%;width:100%;">
	    </el-carousel-item>
	 </el-carousel>
 </el-card>

放在<script的data部分

// 具体路劲根据自己的情况而定
// 如果实在不知道可以去上面这样试<img src="../a">
imgList: [
        {img: require('../assets/skin-blue.jpg')},
        {img: require('../assets/skin-chrome.jpg')},
        {img: require('../assets/skin-city.jpg')},
        {img: require('../assets/skin-cloth.jpg')},
        {img: require('../assets/skin-kiwi.jpg')},
        {img: require('../assets/skin-greenish.jpg')},
        {img: require('../assets/skin-lights.jpg')}
      ],

在<style中

.el-carousel__item img {
  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;
}