使用js加产品图片实现3D效果

使用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
        }
      }
    },