95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("carousel-tesedangjian", {
|
|
template: `
|
|
<div :style="{'height': height + 'px','width':width+'px'}" class="carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">
|
|
<div class="carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">
|
|
<div class="carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">
|
|
<!-- <img :src="item.url">-->
|
|
<el-image :style="{'height': height + 'px','width':width+'px'}"
|
|
:src="item.url" fit="cover" :preview-src-list="dataList"></el-image>
|
|
<div class="carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>
|
|
<div class="carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
`,
|
|
props: {
|
|
// list:{
|
|
// type:Array
|
|
// },
|
|
height:{
|
|
type:Number
|
|
},
|
|
width:{
|
|
type:Number
|
|
},
|
|
data:{
|
|
type:Array
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
interval:undefined,
|
|
left:0,
|
|
direction:'left',
|
|
forData:[],
|
|
arrowLeft: -30,
|
|
arrowRight:-30,
|
|
dataList:[]
|
|
}
|
|
},
|
|
mounted(){
|
|
this.init()
|
|
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.dataList=this.data.map(item=>item.url)
|
|
this.forData = this.data
|
|
this.interval = setInterval(this.timer, 3000);
|
|
},
|
|
carouselMouseover(){
|
|
this.arrowLeft =10
|
|
this.arrowRight =10
|
|
clearInterval(this.interval);
|
|
},
|
|
carouselMouseout(){
|
|
this.arrowLeft = -30
|
|
this.arrowRight =-30
|
|
this.direction = 'left'
|
|
this.interval=setInterval(this.timer,3000);
|
|
},
|
|
clickCtrl(direction){
|
|
this.direction = direction
|
|
this.timer()
|
|
},
|
|
timer(){
|
|
if(this.direction == 'left'){
|
|
this.left = this.left - this.width
|
|
if(this.left == -((this.forData.length) * this.width)){
|
|
this.left = 0
|
|
}
|
|
}else{
|
|
if(this.left == 0){
|
|
this.left = -((this.forData.length-1) * this.width)
|
|
}else {
|
|
this.left = this.left + this.width
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch:{
|
|
data: function (n,o) {
|
|
this.init()
|
|
}
|
|
},
|
|
|
|
})
|