使用js加产品图片实现3D效果
先看效果图
实现思路:
通过对不同的产品图的显示隐藏来控制3d效果,通过定时器控制产品图的显示隐藏实现产品的自动旋转
实现步骤
1.第一步先加载所有的图片,iImgCount代表图片的数量,this.imgName代表图片的目录和图片名字。图片加载完毕之后自动旋转3d的效果,当手滑动屏幕或者是鼠标点击时通过计算滑动的距离比例来计算3d显示的位置!废话不多说,䁖䁖代码!!!
// 图片生成
createImg() {
for (let i = 0; i <= this.iImgCount; i++) {
var S = '00000'
var picname = '' + i * 2
var v = picname.length
var ss = S.substr(0, 5 - v)
this.imgList.push(
require('@/assets/images/3D/' +
this.imgName +
'/' +
this.imgName +
'/jz_' +
ss +
'' +
picname +
'.png')
)
}
this.loadImages(this.imgList)
},
// 生成图片标签
loadImages(urlArr) {
//参数 图片地址数组
// eslint-disable-next-line no-unused-vars
var pro = new Promise((resolve, reject) => {
if (urlArr.length <= 0) return
let i = 0,
// timer = null,
len = urlArr.length,
load = url => {
if (i < len) {
const image = new Image()
image.src = url
image.style.display = 'none'
document.getElementById('imgBox').appendChild(image)
this.timer = setInterval(() => {
if (image.complete) {
// console.log('complete')
clearInterval(this.timer)
load(urlArr[i++])
}
}, 0)
} else {
this.showLoading = false // 所有图片加载完后的操作
resolve('200')
}
}
load(urlArr[i])
})
pro.then(value => {
if (value == 200) {
this.auto()//图片加载完毕后自动旋转3D
this.changeImg()
}
})
},
// 自动旋转3D图
auto() {
this.timers = setInterval(() => {
$('.imgBox img').css('display', 'none')
$('.imgBox img')
.eq(parseInt(this.lastImg))
.css('display', 'block')
this.lastImg++
if (this.lastImg >= this.iImgCount) {
this.lastImg = 0
}
}, 100)
},
// 清除定时器
stopMove() {
clearInterval(this.timers)
this.timers = null
},
// 当手滑动时对应的3d动效
changeImg() {
var that = this
if (isTouchDevice()) {
$('#imgBox')[0].ontouchstart = function(ev) {
var oEvent = ev || event
that.startX = oEvent.changedTouches[0].clientX
that.lastX = that.startX
$('#imgBox')[0].ontouchmove = onMove
$('#imgBox')[0].ontouchend = onUp
function onMove(ev) {
var oEvent = ev || event
var i =
-(oEvent.changedTouches[0].clientX - that.startX) / that.SCALE
that.num =
(that.lastImg +
i +
Math.abs(Math.floor(i / that.iImgCount)) * that.iImgCount) %
that.iImgCount
$('.imgBox img').css('display', 'none')
$('.imgBox img')
.eq(parseInt(that.num))
.css('display', 'block')
// speed=-(oEvent.changedTouches[0].clientX-lastX)/this.SCALE;
that.lastX = oEvent.changedTouches[0].clientX
return false
}
function onUp() {
this.onmousemove = null
this.onmouseup = null
that.lastImg = that.num
that.auto()
}
that.stopMove()
return false
}
} else {
$('#imgBox')[0].onmousedown = function(ev) {
var oEvent = ev || event
that.startX = oEvent.clientX
that.lastX = that.startX
$('#imgBox')[0].onmousemove = onMove
$('#imgBox')[0].onmouseup = onUp
function onMove(ev) {
var oEvent = ev || event
var i = -(oEvent.clientX - that.startX) / that.SCALE
that.num =
(that.lastImg +
i +
Math.abs(Math.floor(i / that.iImgCount)) * that.iImgCount) %
that.iImgCount
$('.imgBox img').css('display', 'none')
$('.imgBox img')
.eq(parseInt(that.num))
.css('display', 'block')
that.lastX = oEvent.clientX
return false
}
function onUp() {
this.onmousemove = null
this.onmouseup = null
that.lastImg = that.num
that.auto()
}
that.stopMove()
return false
}
}
},