<template>
  <div class="zj_carouselCont">
    <ul ref='ul' @mouseenter="play" @mouseleave="pause">
      <li v-for="(item,index) in imgArr">
        <img :src="item.Url" />
      </li>
    </ul>
    <!--'+?x-oss-process=image/resize,m_lfit,h_120,w_160'-->
  </div>
</template>

<script>
  export default {
    props: ["imgArr"],
    data() {
      return {
        i:0,
        isPlay:false,
        timer:null
      };
    },
    mounted() {
      this.$refs.ul.style.width=this.imgArr.length*120+'px';
    },
    computed: {},
    methods: {
      play(){
        this.isPlay=true,
          this.timer=setInterval(()=>{
            if(this.isPlay==true){
              if(this.i<this.imgArr.length-1){
                this.i++
              }else{
                this.i=0
              }
              this.$refs.ul.style.left=-120*this.i+'px'
            }
          },3000)
      },
      pause(){
        this.isPlay=false
        clearInterval(this.timer)
      }
    },
    created() {}
  };
</script>

<style>
  .zj_carouselCont{width: 120px; height: 80px; overflow: hidden; position: relative;}
  .zj_carouselCont ul{width: auto; height: 80px; position: absolute; left:0; transition: left .2s;}
  .zj_carouselCont ul li{float: left; width: 120px; height: 80px; border: none; overflow: hidden;}
  .zj_carouselCont ul li>img{width: 120px; height: 80px;}
</style>
