2

data-loops="false"当我设置选项并启用动画时，jQuery Reel 插件开箱即用，data-speed="1.5"它水平循环序列，但仅当它进入图像集的最后一个垂直行时。

如何修改 JS 代码以启用循环每个水平（无休止地来回行）而不自动切换到下一个水平行，只允许鼠标切换行。

Goal 1. Disable switching to next row when automatically scrolling.
Goal 2. At the end of horizontal animation reverse animation for that row backwards and then forward again.
Goal 3. Optional, don't stop animation while scrolling image vertically

JS 小提琴演示

编辑：基本上功能已经存在JS Fiddle 2唯一需要做的就是在动画到达结尾而不是从头开始时让它“反弹”，并在到达开始时反弹。

4

1 回答 1

1

您可以添加一些 JS 使其顺时针然后逆时针循环，这是一个小提琴：https ://jsfiddle.net/n83ytq90/53/

$('#image').on('loaded', function() {
  $('#image').on('frameChange', function() {
    var row = $(this).reel('row');
    var frame = $(this).reel('frame');
    // if we reached the end of the row (frame 20 for row 1, 40 for row 2 etc)
    if (frame === 20 * row) {
    // play in reverse
      $("#image").trigger('play', [-1.5]);
    }
    // if we reach first frame of row
    if (frame === (20 * (row - 1) + 1)) {
    // play forward
      $("#image").trigger('play', [1.5]);
    }
  });
});
于 2020-03-04T09:22:06.117 回答