js实现图片从右到左循环播放

你可以通过设置图片的定位和动画来实现图片从右到左循环播放的效果。具体实现方法如下：

1. 首先，你需要将图片设置为绝对定位，然后将其右边缘与父元素的右边缘对齐，这样图片就会始终出现在父元素的最右边。

2. 接下来，你需要创建一个动画，使图片从右边缘平移至左边缘，然后再返回到右边缘，形成循环播放的效果。你可以使用 CSS3 的 @keyframes 规则来定义这个动画。例如：

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

这个动画会将图片从初始位置向左平移 100% 的距离，然后再返回到初始位置。

3. 最后，你需要将这个动画应用到图片元素上。你可以使用 transition 属性来实现动画效果，并在需要的时候通过 JavaScript 来触发动画。例如：

img {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  transition: transform 2s linear;
}

img.play {
  animation: slide 4s infinite;
}

这段 CSS 代码将动画效果绑定到了一个名为 slide 的动画上，并将动画无限循环播放。而在 JavaScript 中，你只需要给图片元素添加一个名为 play 的类名，就可以触发动画了。例如：

const img = document.querySelector('img');
img.classList.add('play');

这样，图片就会开始从右到左循环播放了。