97 lines
2.9 KiB
JavaScript
97 lines
2.9 KiB
JavaScript
|
|
Vue.component("roll-left-right-img", {
|
|
template: `
|
|
<div @mouseout="costMouseout" @mouseover="costMouseover">
|
|
<slot></slot>
|
|
<div class="bzh-flex">
|
|
<div class="bzh-btn">
|
|
<img src="/images/carousel_left.png" @click="carouselLeft">
|
|
</div>
|
|
<div class="bzh-content" ref="rollImgMax" :style="{'width': number*200+'px'}">
|
|
<div class="bzh-content-img" v-for="item in list">
|
|
<el-image style="width: 180px; height: 180px"
|
|
:src="item" fit="cover" :preview-src-list="list"></el-image>
|
|
</div>
|
|
</div>
|
|
<div class="bzh-btn">
|
|
<img src="/images/carousel_right.png" @click="carouselRight">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
list:{
|
|
type:Array
|
|
},
|
|
number:{
|
|
type:Number
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
costIndex:0,
|
|
imgRollInterval:undefined,
|
|
direction:'left'
|
|
}
|
|
},
|
|
mounted(){
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init(){
|
|
// 图片轮播 定时器
|
|
this.imgRollInterval = setInterval(this.imgRoll,5000);
|
|
},
|
|
carouselLeft(){
|
|
this.direction = 'left'
|
|
this.manufacturingCostRoll()
|
|
},
|
|
carouselRight(){
|
|
this.direction = 'right'
|
|
this.manufacturingCostRoll()
|
|
},
|
|
manufacturingCostRoll(){
|
|
var width = $(".bzh-content-img").innerWidth()
|
|
if(this.direction == 'right'){
|
|
if(this.costIndex == this.list.length - this.number){
|
|
this.costIndex = 0
|
|
}else{
|
|
this.costIndex = this.costIndex + 1
|
|
}
|
|
}else{
|
|
if(this.costIndex == 0){
|
|
this.costIndex = this.list.length - this.number
|
|
}else{
|
|
this.costIndex = this.costIndex - 1
|
|
}
|
|
}
|
|
console.log(this.costIndex)
|
|
$(this.$refs.rollImgMax).animate({scrollLeft:(width*this.costIndex)+'px'})
|
|
this.direction = 'right'
|
|
},
|
|
|
|
|
|
imgRoll(){
|
|
var width = $(".bzh-content-img").innerWidth()
|
|
if(this.costIndex == this.list.length - this.number){
|
|
this.costIndex = 0
|
|
}else{
|
|
this.costIndex = this.costIndex + 1
|
|
}
|
|
$(this.$refs.rollImgMax).animate({scrollLeft:(width*this.costIndex)+'px'})
|
|
},
|
|
costMouseover(){
|
|
clearInterval(this.imgRollInterval);
|
|
},
|
|
costMouseout(){
|
|
this.imgRollInterval=setInterval(this.imgRoll,5000);
|
|
},
|
|
},
|
|
watch:{
|
|
list:function (o,n) {
|
|
|
|
}
|
|
},
|
|
|
|
})
|