99 lines
3.6 KiB
JavaScript
99 lines
3.6 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("swiper-jiaoyu", {
|
|
template: `
|
|
<div>
|
|
<!-- 头部展示-->
|
|
<div class="guocheng">
|
|
<div class="glr-title">过程展示(15)</div>
|
|
</div>
|
|
<!-- 线条展示-->
|
|
<div class="line-drop">
|
|
<div class="drop">
|
|
<div class="cricle"></div>
|
|
<div class="cricle"></div>
|
|
<div class="cricle"></div>
|
|
</div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<!-- 轮播图展示-->
|
|
<div class="lunbo" @mouseout="costMouseout" @mouseover="costMouseover">
|
|
<div class="insiderBox" ref="modifyContent" style="overflow: hidden">
|
|
<ul class="bigBox" ref="width">
|
|
<li class="smallBox" v-for="(item,index) in imglist" :key="index">
|
|
<img :src="item" alt="" style="width: 100%;height: 100%">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="circleStyle" ref="circle">
|
|
<div :class=" CircleIndex == index ? 'active circleBox':'circleBox'"
|
|
v-for="(item,index) in (imglist.length - 1)" :key="index"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
imglist: {
|
|
type: Array,
|
|
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
CircleIndex: 0,
|
|
costIndex: 0,
|
|
direction: 'right',
|
|
costInterval: undefined,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
//初始化
|
|
init() {
|
|
// 图片定时器
|
|
this.costInterval = setInterval(this.manufacturingCostRoll, 2000);
|
|
this.$nextTick(() => {
|
|
var width = $(".smallBox").innerWidth() + 76
|
|
const a = $(this.$refs['width']).width = width * this.imglist.length
|
|
console.log(a)
|
|
})
|
|
},
|
|
|
|
manufacturingCostRoll() {
|
|
var width = $(".smallBox").innerWidth() + 76
|
|
if (this.direction == 'right') {
|
|
if (this.costIndex == this.imglist.length-2) {
|
|
this.costIndex = 0
|
|
|
|
} else {
|
|
this.costIndex = this.costIndex + 1
|
|
|
|
}
|
|
} else {
|
|
if (this.costIndex == 0) {
|
|
this.costIndex = this.imglist.length-2
|
|
|
|
} else {
|
|
this.costIndex = this.costIndex - 1
|
|
}
|
|
}
|
|
this.CircleIndex = this.costIndex
|
|
$(this.$refs.modifyContent).animate({scrollLeft: (width * this.costIndex) + 'px'})
|
|
this.direction = 'right'
|
|
// console.log(123)
|
|
}
|
|
,
|
|
costMouseover() {
|
|
clearInterval(this.costInterval);
|
|
}
|
|
,
|
|
costMouseout() {
|
|
this.costInterval = setInterval(this.manufacturingCostRoll, 2000);
|
|
}
|
|
},
|
|
|
|
})
|