VUE中用原生js实现轮播图效果(2)

.proTitle {

line-height: 30px;font-size: 14px;margin: 2px auto;

}

.proText {

color: #666;line-height: 180%;font-size: 12px;margin: 2px auto;

}

JS部分：

export default {

name: ‘Home’,

data () {

return {

productList: [

{

ProductName: ‘ET-NBAC-I’,

Description: ‘ET-NBAC-I三相不平衡智能调控系统是一种智能实时调控装置，…’,

picSrc: require(‘…/assets/images/ET-NBAC-I.png’),

picWidth: ‘80px’

},

{

ProductName: ‘ET-NBAC-II’,

Description: ‘ET-NBAC-II三相不平衡智能调控系统是一种智能实时调控装置…’,

picSrc: require(‘…/assets/images/ET-NBAC-II.png’),

picWidth: ‘80px’

},

{

ProductName: ‘ET-TSC++’,

Description: ‘ET-TSC++超快速电容器综合模块，具有速度快、容量大、寿命长…’,

picSrc: require(‘…/assets/images/ET-TSC++.png’),

picWidth: ‘80px’

},

{

ProductName: ‘ET-D(S)VS’,

Description: ‘末端电压稳定装置是一种跟踪末端线路电压变化、自…’,

picSrc: require(‘…/assets/images/ET-D(S)VS.png’),

picWidth: ‘80px’

},

{

ProductName: ‘在线监测系统’,

Description: ‘电能质量在线监测系统是面向对象的大型电能质量在线监测与管理系统。…’,

picSrc: require(‘…/assets/images/在线监测系统.png’),

picWidth: ‘80px’

},

{

ProductName: ‘PQ2000’,

Description: ‘PQ2000电能质量分析仪是北斗易通结合我国电力系统的特点，采用…’,

picSrc: require(‘…/assets/images/PQME2000.png’),

picWidth: ‘80px’

},

{

ProductName: ‘PQME2000系列’,

Description: ‘PQME2000系列是北斗易通公司严格按照国家颁布的相关技术标准…’,

picSrc: require(‘…/assets/images/PQME2000系列.png’),

picWidth: ‘80px’

}

]

}

},

mounted () {

let len = this.productList.length % 4

// 根据产品数组长度除以4的余数，来给数组末尾加入几个空的object

switch (len) {

case 0:

break

case 1:

for (let i = 0; i < 3; i++) {

this.productList.push(

{

ProductName: ‘’,

Description: ‘’,

picSrc: ‘’,

picWidth: ‘0’

}

)

}

break

case 2:

for (let i = 0; i < 2; i++) {

this.productList.push(

{

ProductName: ‘’,

Description: ‘’,

picSrc: ‘’,

picWidth: ‘0’

}

)

}

break

case 3:

this.productList.push(

{

ProductName: ‘’,

Description: ‘’,

picSrc: ‘’,

picWidth: ‘0’

}

)

break

default:

break

}

// 取数组前4个元素，加入到数组末尾去，便于轮播

let productListFrontFourthObject = this.productList.slice(0, 4)

for (let i = 0; i < productListFrontFourthObject.length; i++) {

this.productList.push(productListFrontFourthObject[i])

}

// 设置定时，开始轮播

let _this = this

setTimeout(function () {

_this.changeLeftVal()

}, 3000)

},

methods: {

// 移动面板mobilePanel left属性变化函数

changeLeftVal () {

// 变化前移动面板的left属性值

let beforeLeftVal = parseInt(document.querySelector(‘.mobilePanel’).style.left)

// 变化后移动面板的left属性值

let afterLeftVal = beforeLeftVal - 1080

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

yle.left)

// 变化后移动面板的left属性值

let afterLeftVal = beforeLeftVal - 1080

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-xGx6aRjp-1714364864889)]