交换sprite动画onclick javascript

<div id="sprite" onclick="changeSpriteAnimation()"></div>

#sprite {
  width: 100px;
  height: 100px;
  background-image: url('sprite.png');
  background-size: 500px 100px; /* 假设精灵图像包含5个帧，每个帧宽度为100px */
}

function changeSpriteAnimation() {
  var sprite = document.getElementById('sprite');
  var currentPosition = sprite.style.backgroundPosition;
  var currentPositionX = parseInt(currentPosition.split(' ')[0]);
  var frameWidth = 100; // 每个帧的宽度
  var totalFrames = 5; // 总帧数

  // 计算下一个帧的位置
  var nextPositionX = (currentPositionX - frameWidth) % (frameWidth * totalFrames);

  // 设置新的背景位置
  sprite.style.backgroundPosition = nextPositionX + 'px 0';
}