vue 旋转木马

以下是5张图片的配置， 图片减少或者增加都需要修改 config

<template>
  <div id="wrapper">
    <transition-group name="list" tag="ul" mode="out-in">
      <li v-for="(item, index) in piclist" :style="config[index]" :key="item.id">
        <img :src="item.url" style="width: 100%; height: 100%;">
      </li>
    </transition-group>
    <span id="arrLeft" class="prev" @click="turnleft">
      <Icon type="ios-arrow-back" class="icon"/>
    </span>
    <span id="arrRight" class="next" @click="turnright">
      <Icon type="ios-arrow-forward" class="icon"/>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      piclist: [
        { id: '1', url: 'http://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/lvpics/w=1000/sign=9b38971c908fa0ec7fc7600d16a758ee/c8ea15ce36d3d5394fe85aec3b87e950342ab0cc.jpg' },
        { id: '2', url: 'http://pic40.nipic.com/20140331/9469669_142840860000_2.jpg'},
        { id: '3', url: 'http://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/lvpics/w=1000/sign=9b38971c908fa0ec7fc7600d16a758ee/c8ea15ce36d3d5394fe85aec3b87e950342ab0cc.jpg' },
        { id: '4', url: 'http://photocdn.sohu.com/20111207/Img328224894.jpg' },
        { id: '5', url: 'http://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/lvpics/w=1000/sign=9b38971c908fa0ec7fc7600d16a758ee/c8ea15ce36d3d5394fe85aec3b87e950342ab0cc.jpg' }
      ],
      //文件图片配置
      config: [
        {
          position: "absolute",
          width: "200px",
          height: "320px",
          top: "60px",
          left: "90px",
          opacity: 0.2,
          zIndex: 2,
          transition: "1s"
        },
        {
          position: "absolute",
          width: "200px",
          height: "380px",
          top: "30px",
          left: "140px",
          opacity: 0.8,
          zIndex: 2,
          transition: "1s"
        },
        {
          position: "absolute",
          width: "344px",
          height: "435px",
          top: "0px",
          left: "200px",
          opacity: 1,
          zIndex: 4,
          transition: "1s"
        },
        {
          position: "absolute",
          width: "200px",
          height: "380px",
          top: "30px",
          right: "140px",
          opacity: 0.8,
          zIndex: 2,
          transition: "1s"
        },
        {
          position: "absolute",
          width: "200px",
          height: "320px",
          top: "60px",
          right: "90px",
          opacity: 0.2,
          zIndex: 2,
          transition: "1s"
        }
      ],
      previous: 0,
      now: Date.now()
    };
  },
  methods: {
  //实现点击按钮切换的动画，设置时间参数防止多次点击
    turnleft: function() {
      this.now = Date.now();
      if (this.now - this.previous > 1000) {
        this.config.push(this.config.shift());
        this.previous = this.now;
      }
    },
    turnright: function() {
      this.now = Date.now();
      if (this.now - this.previous > 1000) {
        this.config.unshift(this.config.pop());
        this.previous = this.now;
      }
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: auto;
  height: 500px;
  width: 740px;
  margin: 0 auto;
  position: relative;
}
ul {
  list-style: none;
}
.prev,
.next {
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  top: 50%;
  margin-top: -56px;
  overflow: hidden;
  text-decoration: none;
  background: #000;
  z-index: 5;
  opacity: 0.12;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  .icon{
    color: #fff;
    font-size: 30px;
  }
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
.picleft {
  width: 400;
  top: 20;
  left: 50;
  opacity: 0.2;
  z-index: 2;
}
.piccenter {
  width: 800;
  top: 100;
  left: 200;
  opacity: 1;
  z-index: 4;
}
.picright {
  width: 400;
  top: 20;
  left: 750;
  opacity: 0.2;
  z-index: 2;
}
</style>