Element UI 走马灯的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI 走马灯的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

走马灯是什么

原生js实现

Element UI的走马灯使用

el-carousel

Carousel Events

el-carousel-item

走马灯是什么

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

比如

elementui走马灯,前端,javascript,vue.js,开发语言

原生js实现

JS实现轮播图效果（同时播放音频）_trigger333的博客-CSDN博客

Element UI的走马灯使用

Element - The world's most popular Vue UI framework

elementui走马灯,前端,javascript,vue.js,开发语言

<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

elementui走马灯,前端,javascript,vue.js,开发语言

当幻灯片被切换时 (不论是时间间隔到了自动切换，还是用户点击左右切换按钮手动切换) 都会触发该事件。

所以可以绑定如下事件：

@change="carouselChange"

一旦图片手动或者自动切换，就会执行methods中的carouselChange函数：

在触发该事件时会传入两个参数，第一个是切换后当前图片的索引，第二个是原先图片的索引。

carouselChange(now, prev) {
      console.log("图片索引切换: " + prev + "--->" + now);
      
    },

el-carousel-item

一般在data中定义图片资源的数组，使用命令v-for来进行遍历。

里面不仅仅可以放置图片，还可以放置其他资源，比如音频视频等。文章来源地址https://www.toymoban.com/news/detail-788397.html

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

到了这里，关于Element UI 走马灯的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！