尝试通过循环浏览也跟随光标位置的图像来为光标设置动画

Question

我希望图像同时跟随光标位置并在图像阵列中循环。使用下面的代码，图像跟踪光标-但不会在我的动画帧数组中循环。相反，我收到“ TypeError：无法读取未定义的属性'length'     在animateCursor”。请帮助！

图像和光标应该分开-因为光标具有独特的样式。我觉得好像范围我不了解。至少，我已经能够检索数组中1个图像的相对URL。因此，看起来好像循环很不稳定。

let cursorArray = [
  'media/cursor/cur1.svg',
  'media/cursor/cur2.svg',
  'media/cursor/cur3.svg',
  'media/cursor/cur4.svg',
  'media/cursor/cur5.svg',
  'media/cursor/cur6.svg',
  'media/cursor/cur7.svg',
  'media/cursor/cur8.svg',
  'media/cursor/cur9.svg',
  'media/cursor/cur10.svg',
  'media/cursor/cur11.svg',
  'media/cursor/cur12.svg',
  'media/cursor/cur13.svg',
  'media/cursor/cur14.svg',
  'media/cursor/cur15.svg',
  'media/cursor/cur16.svg',
  'media/cursor/cur17.svg'
];

function animateCursor(cursorArray) {
  let circle = document.createElement('img');

  for (let i = 0; i < cursorArray.length; i++) {
    circle.setAttribute('src', cursorArray[i]);
    circle.setAttribute('class', 'cursor');

    document.body.appendChild(circle);

    circle.style.transition = 'all 0.2s ease';
    circle.style['-webkit-transition'] = 'all 0.2s ease';
    circle.style['-moz-transition'] = 'all 0.2s ease';
    circle.style['-ms-transition'] = 'all 0.2s ease';
    circle.style['-o-transition'] = 'all 0.2s ease';
  }
}

document.addEventListener('mousemove', animateCursor(cursorArray));

document.onmousemove = function position(e) {
  let circle = document.querySelector('.cursor');
  circle.style.position = 'absolute';
  circle.style.left = e.clientX + 'px';
  circle.style.right = e.clientX + 'px';
  circle.style.top = e.clientY + 5 + 'px';
  circle.style.height = '50px';
  circle.style.width = '50px';

}