文章目录

一、vue.js+elementUI跑马灯放置图片,实现轮播效果二、使用步骤1.html2.js3.css 这里放上我全部的代码

一、vue.js+elementUI跑马灯放置图片,实现轮播效果

二、使用步骤

1.html

代码如下（示例）：

<template><el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="img in imgs" :key="img"><img :src="img" alt=""></el-carousel-item></el-carousel></template>

2.js

代码如下（示例）：

<script>new Vue({el: "#app",data() {return {imgs: ['img/stone.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg']}}})</script>

这里imgs里面放图片的路径，可以是绝对路径、相对路径、图片链接（图片的格式也无要求）

3.css

<style>.el-carousel__item img {height: 100%;width: 100%;}</style>

设置图片所占比大小

这里放上我全部的代码

<div id="app"><template><el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="img in imgs" :key="img"><img :src="img" alt=""></el-carousel-item></el-carousel></template></div><script>new Vue({el: "#app",data() {return {imgs: ['img/stone.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg']}}})</script><style>.el-carousel__item img {height: 100%;width: 100%;}</style>