Javascript 根据图像数量减慢微调器的速度

我正在围绕一个对象制作一个360度旋转器，所以我将48幅图像缝合在一起，然后将其加载到图像中，并在用户单击和拖动时转换该图像

我遇到的问题是，无论图像数量多少，我都需要将移动速度降低到相同的速度。我还需要让它循环，不太确定我是否会这样做，对吗

Vue.component（“media-360-viewer”{
数据：（）=>{
返回{
图像：'https://i.imgur.com/smFuq9V.jpg',
宽度：196.2890625，
拖动：false，
图片：48，
位置：空，
开始：空
};
},
方法：{
startDrag:函数（$event）{
this.draging=true；
this.start=$event.clientX；
},
handleMove:函数（$event）{
如果（此。拖动）{
this.position=$event.clientX；
}
}
},
计算：{
偏移量：函数（）{
返回this.width*（this.start-this.position）；
}
},
创建（）{
const component=this；
document.addEventListener（“mouseup”，函数（）{
component.draging=false；
document.removeEventListener（“mousemove”，this.handleMove）；
});
},
安装的（）{
document.addEventListener（“mousemove”，this.handleMove）；
},
模板：`
正在加载
`
});
var vm=新的Vue({
el:“应用程序”
});

你好 问题1 添加循环

解决方案 更改

offset（）

computed函数，使其从0开始切片

offset(){

  let offset = this.width * (this.start - this.position); 
  // --> relative offset for looping (when reached at end offset of image, starts from 0)
  let relativeOffset = offset % this.maxOffset; 
  if ((this.start - this.position) > 0) {
   // --> user dragging left so we start from end of image
   return relativeOffset + -this.maxOffset;
  } else {
   // --> user dragging to right so return relative offset as is
    return relativeOffset;
  }
},

添加新的计算函数以计算maxOffset

// --> this function will return the max offset till which image can move
maxOffset: function() {
  return (this.images - 1) * this.width;
},

另外，不要忘记将

位置

和

开始

数据变量设置为0

问题2 控制速度

解决方案 这是一个建议，
您可以设置数据变量eg

ppf

（每帧像素数），以设置要显示的一帧要覆盖的像素数。例如，在相同的

offset

函数中
第行

let offset=this.width*（this.start-this.position）

你可以换成

let effectiveMove = Math.floor((this.start - this.position) / ppf))
let offset = this.width * effectiveMove;

// then check effectiveMove if user dragging left or right
// ------ rest of the code



这将确保只有当用户拖动“ppf”像素数时，才会显示新帧。谢谢！但是，我希望能够旋转它，放开，从我停止的位置再次单击开始旋转它，我将如何进行呢？您可以通过在
mouseup
事件上保存当前偏移量，并将其添加为下一次单击和拖动操作的基本偏移量，轻松完成此操作。
let effectiveMove = Math.floor((this.start - this.position) / ppf))
let offset = this.width * effectiveMove;

// then check effectiveMove if user dragging left or right
// ------ rest of the code