目录
走马灯是什么
原生js实现
Element UI的走马灯使用
el-carousel
Carousel Events
el-carousel-item
走马灯是什么
在有限空间内，循环播放同一类型的图片、文字等内容，走马灯也叫轮播图。
比如
原生js实现
JS实现轮播图效果（同时播放音频）_trigger333的博客-CSDN博客
Element UI的走马灯使用
Element - The world's most popular Vue UI framework
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<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>el-carousel
代表走马灯组件，一般配置的参数有
走马灯切换间隔： :interval="4000" 单位 毫秒
走马灯类型 type="card"
展示高度 height="200px"
Carousel Events
当幻灯片被切换时 (不论是时间间隔到了自动切换，还是用户点击左右切换按钮手动切换) 都会触发该事件。
所以可以绑定如下事件：
@change="carouselChange"
一旦图片手动或者自动切换，就会执行methods中的carouselChange函数：
在触发该事件时 会传入两个参数，第一个是切换后当前图片的索引，第二个是原先图片的索引。
carouselChange(now, prev) {
console.log("图片索引切换: " + prev + "--->" + now);
},el-carousel-item
一般在data中定义图片资源的数组，使用命令v-for来进行遍历。
里面不仅仅可以放置图片，还可以放置其他资源，比如音频 视频等。
<el-carousel-item v-for="item in pics" :key="item">
<el-image :src="item"></el-image>
<audio :src="musicUrl" autoplay="autoplay"></audio>
</el-carousel-item>
