走马灯是什么

在有限空间内，循环播放同一类型的图片、文字等内容，走马灯也叫轮播图。

比如

原生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>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/92752.html