<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>