jQuery 卷轴启用循环动画

Question

jQuery 当我设置选项 data-loops="false" 并启用动画时开箱即用的 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 Fiddle Demo

编辑： 基本上功能已经存在 JS Fiddle 2 唯一需要做的就是 "bounce back" 当动画到达结尾而不是从头开始时, 并在到达起点后反弹。

Answer 1

可以加点JS让它先顺时针再逆时针循环，这里是fiddle：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]);
    }
  });
});

jQuery 卷轴启用循环动画

jQuery Reel enable looping animation

javascript

jquery-reel