将45转换为1,345转换为2

Question

我正在构建一个旋转木马，在上的左右滑动限制超过45px，每个项目的宽度为300px我想知道如何转换45到1索引和345到2索引． 我总共有3件东西要放在传送带上。

我有以下公式将其转换为2个索引，但不是第一个索引

如果当前位置在100px，大于45，它仍然会产生1 index

(345/345 * 2)2

(45/345 * 2) a result of 0.2608695652173913

我想让这一行

let move = current_translate - previous_translate_item;
if (move < -345) current_index += 1;
if (move < -40) current_index += 1;
if (move > 40) current_index -= 1;
if (move > 345) current_index -= 1;

移动屏幕的Carousel

Answer 1

试试这个:

let val_converter = val => -Math.sign(val)*Math.floor((Math.abs(val)-40)/300 +1);
console.log(val_converter(-645));   //  3
console.log(val_converter(-644));   //  2
console.log(val_converter(-345));   //  2
console.log(val_converter(-344));   //  1
console.log(val_converter(- 40));   //  1
console.log(val_converter(- 39));   //  0
console.log(val_converter(   0));   //  0
console.log(val_converter(  39));   //  0
console.log(val_converter(  40));   // -1
console.log(val_converter( 344));   // -1
console.log(val_converter( 345));   // -2
console.log(val_converter( 644));   // -2
console.log(val_converter( 645));   // -3

在您的特定源代码中，应该是这样的:

let val_converter = val => -Math.sign(val)*Math.floor((Math.abs(val)-40)/300+1);
let move = current_translate - previous_translate_item;
current_index += val_converter(move);