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