前端经常会遇到焦点图效果，在使用Element UI时，我们可以选择使用 el-carousel，这里我们简单了解一下：

下载 Element UI (这里就不说按需加载了)

cnpm i element-ui -S

main.js引用

import Element from 'element-ui'
Vue.use(Element)

使用el-carousel

//这是arr 自己随便写点数据，例如arr=[{name:"图一"},{name:"图二"}]
<el-carousel 
      indicator-position="none"
      :autoplay="false"
      arrow="always"
      @change="changeImgFn"
      :initial-index="ind"
    >
      <el-carousel-item v-for="(m,i) in arr" :key="i">
        {{m.name}}
      </el-carousel-item>
    </el-carousel>

export default {
	props:{
		//默认激活下标
		ind :{
	      type : Number,
	      default :0
	    }
	},
	methods :{
		changeImgFn (ind,prevInd){
			console.log(prevInd,'上一张图下标');
			console.log(ind,'当前激活下标');
		}
	}
}

设置是否显示 左右切换按钮

//arrow属性定义了切换箭头的显示时机。
//默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；
//若将arrow设置为always，则会一直显示；
//设置为never，则会一直隐藏。

全屏轮播图效果组件

<template>
  <section class="lb-swiper-img-wrap">
    <slot></slot>
    <el-carousel 
      indicator-position="none"
      :autoplay="false"
      arrow="always"
      @change="changeImgFn"
      :initial-index="ind"
    >
      <el-carousel-item v-for="(m,i) in arr" :key="i">
        <div 
          class="img-box g-cen-cen g-back" 
          :style="[
          {'background-image':'url('+m+')'},
          {'transform':'rotate('+rotateNum+'deg)'}
        ]"
        >
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-row class="swiper-btns-box">
      <i class="iconfont icon-fan" @click="rotateFn('-')"></i>
      <i class="iconfont icon-zheng" @click="rotateFn('+')"></i>
    </el-row>
  </section>

</template>

<script>
export default {
  props :{
    arr :{
      type:Array,
      default:function(){
        return []
      }
    },
    ind :{
      type : Number,
      default :0
    },
    urlType : {
      type :String,
      default:'url'
    }
  },
  data() {
    return {
      rotateNum :0,
      imgIndex:0
    }
  },
  methods :{
    //切换图片
    changeImgFn (e) {
      this.imgIndex = e;
      this.rotateNum = 0;
    },
    //旋转按钮
    rotateFn(str){
      if(str =='-'){
        this.rotateNum = this.rotateNum  - 90;
      } else{
        this.rotateNum = this.rotateNum  + 90;
      }
    }
  }
}
</script>
<style lang="scss">
.lb-swiper-img-wrap{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  z-index: 3000;
  padding:50px 0 140px;
  .el-carousel{
    height: 100%;
    .el-carousel__container{
      margin:0 200px;
      height: 100%;
      .el-carousel__arrow{
        width: 60px;
        height: 60px;
        background-color: transparent;
        i{
          font-size: 50px;
        }
      }
      .el-carousel__arrow--right{
        right: -130px;
      }
      .el-carousel__arrow--left{
        left: -130px;
      }
      .el-carousel__item{
        .img-box{
          height: 100%;
          background-size: contain;
          max-width: 800px;
          margin:0 auto;
        }
      }
    }
  }
  .swiper-btns-box{
    color: #fff;
    text-align: center;
    padding-top: 50px;
    i{
      font-size: 40px;
      margin:0 30px;
      &:hover{
        cursor: pointer;
      }
    }
  }
  .lb-swiper-head{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    text-align: right;
    .el-icon-close{
      color: #ffff;
      line-height: 50px;
      font-size: 40px;
      margin-right: 30px;
      cursor: pointer;
    }
  }
}
</style>