vue+element轮播图小案例（门户网站首页轮播图）

轮播图案列

一、功能截图

二、代码示例

代码如下（示例）：

<template>
  <div style="width: 100%;height: 100%">
    <el-carousel :interval="5000" height="350px"  @change="changeMethod" indicator-position="outside">
      <el-carousel-item v-for="(item,index) in images" :key="index">
        <el-image :class="className" style="width:100%; height:100%" :src="item.idView" fit="fit"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      images: [
        {id: 0, idView: require('../res/img.png')},
        {id: 1, idView: require('../res/img_1.png')},
        {id: 2, idView: require('../res/img_2.png')},
        {id: 3, idView: require('../res/img_3.png')},
      ],
      className: "",
    }
  },
  mounted() {
    this.className = "old-carousel";
    setTimeout(() => {
      this.className = "new-carousel";
    }, 300);
  },
  methods: {
    changeMethod: function (e) {
      this.className = "old-carousel";
      setTimeout(() => {
        this.className = "new-carousel";
      }, 300);
    }
  }
}
</script>
<style scoped>
.new-carousel {
  transition: all 2s;
  transform: scale(1.5);
}

.old-carousel {
  transform: scale(1);
}

.el-carousel__item.is-animating {
  transition: transform 1s ease-in-out;
}
</style>

总结

思维逻辑比较清晰简单