vue+element+html实现轮播图、Carousel 走马灯

1.加载依赖，js、css，vue和elementui相关依赖可以通过其官网下载

<link rel="stylesheet" href="element-ui/index.css">
<script src="js/vue/vue.min.js"></script>
<script src="element-ui/index.js"></script>

2.自定义css

<style>
  html,
  body {
	  height: 100%;
	  background-color: #f4f4f4;
	  margin: 0;
  }
  .el-carousel__item img {
      width: 100%;
	  height: 100%;
	  object-fit: cover;
    }
    
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
</style>

3.html部分，其实element已经帮你实现了

<div id="app">
	<!-- type="card",卡片化,当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格 -->
  <el-carousel indicator-position="outside" :loop="true" :autoplay="true" :interval="2000" height="500px">
	  <el-carousel-item v-for="url in imgs" :key="url">
		<el-image
		   style="width: 100%;height: 100%;"
		  :src="url"
		  :fit="fit">
		</el-image>
	  </el-carousel-item>
  </el-carousel>
</div>

4.js使用vue定义变量

<script>
new Vue({
  el: '#app',
  data() {
    return {
		fit: 'cover',
		imgs: ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'],
    };
  },
  mounted() {
  	
  },
  methods:{
	  
  }
});
</script>

5.搞定，与传统的jquery那些轮播图插件相比真的省事太多了，所以能不用jq就不用jq吧