vue动态轮番图和走马灯

//<m-lunf :tongxin="lunf1"></m-lunf>
//lunf1:{"timeSpace":2,"url":"","num":1,"title":"TransOcean "} ,
Vue.component('m-lunf', {
      template: 
'<div id="lf" style="position:relative;width:100%;    height:300px;   margin:0 auto;  overflow:hidden; " >'+
'  <div  style="display: flex;height:100%  " >'+
'   <div id="" style="color:#ffa900; text-align :center ;font-size :3.4em;position:absolute;width:100%; ">{{tongxin.title}} </div>'+
'   <div v-for="index of tongxin.num" :key="index" style="width:100%; "   @mouseover="btnOpen" @mouseout="btnHide" >'+
'    <img :src="list[index].ImagePath" width="100%" height="100%">'+
'  </div>'+
' </div>'+
'</div>',
      props: {
       tongxin:""
     },
      watch: {
        },
      created(){
        //this.getren()
      },
	mounted: function() {this.timeSpace=this.tongxin.timeSpace
				this.$nextTick(function () {
				this.getchang()
				this.lun()})

			},

      data() {
        return {timeSpace:1,
					list: [
						{ ImagePath: 'http://60.2.62.150:100/SYSA/edit/upimages/n.jpg' },
						
						{ ImagePath: 'https://cache.yisu.com/www/images/ddos_4.png' }, {ImagePath: 'http://60.2.62.150:100/SYSA/edit/upimages/n.jpg' },
					
						{ ImagePath: 'https://cache.yisu.com/www/images/ddos_4.png' }
					],
					pressList: [{ name: '1', isShow: false }, { name: '2', isShow: false }, { name: '3', isShow: false }, { name: '4', isShow: false }, { name: '5', isShow: false }],
					numList: ['p0', 'p1', 'p2', 'p3', 'p4'],
					imgIndex: 0,
					timer: null,jz: false,
					btnShow: false
				}
      },
      methods: {

lun: function(){
//this.imgMove()
this.slideAuto()
 
},
 getchang: function(){var  that=this

/*
var ul="Templates/js.asp?Sort=38"
	  fly.get(ul, {  })
  .then(function (response) {
//var bb1= JSON.parse(response.data.trim())
var bb1=new Function('return '+response.data.trim())();//字符串转对象

 that.init(bb1)
  })
*/
this.jz=true
},
//产品初始
init: function(hh){var gg=[],bb={}
hh.forEach(function(s0){

bb.ImagePath=s0.ImagePath

gg.push({"ImagePath":s0.ImagePath})

});
 
this.list=gg
this.jz=true

 },    //setInterval  —— 会不停的调用函数setTimeout —— 只会执行函数一次
  //向右移动
   rightMove:function(){
 this.list.push(this.list[0]);
 this.list.shift();
   //console.log(this.pic);
   },

  slideAuto:function () {
    var _this = this;
    _this.timer = setTimeout(function () {
  //console.log( _this.jz);
     if(_this.jz){
      _this.rightMove();
      _this.slideAuto();
     }
    }, _this.timeSpace * 1000);
   },
	   /*
imgMove: function() {  var  that=this
this.jz=true
	this.imgTimer = setInterval(function (){
if (that.jz)
{that.imgIndex=that.imgIndex+1
if(that.imgIndex >that.list.length-1)	that.imgIndex = 0

that.pic=that.list[that.imgIndex].ImagePath

}
					}, 3000)
				},*/
btnOpen() {
					this.btnShow = true;
					clearInterval(this.timer)
				},
btnHide() {
					this.btnShow = false;
					this.slideAuto()
				},


      }
    })