如何在Vanilla JS中的多个选项之间切换时平滑移动背景

<ul id="options">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

#options {
  width: 300px;
  height: 200px;
  background-image: url(option1.jpg); /* 初始背景图片 */
  transition: background-image 0.5s ease; /* 添加过渡效果 */
}

li {
  cursor: pointer;
}

var optionsContainer = document.getElementById('options');
var options = optionsContainer.getElementsByTagName('li');

optionsContainer.addEventListener('click', function(event) {
  var clickedOption = event.target;
  var index = Array.prototype.indexOf.call(options, clickedOption);

  // 根据选项的索引来计算需要移动的距离
  var distance = index * -300; // 假设每个选项的宽度为300px

  optionsContainer.style.backgroundPositionX = distance + 'px';
});