图片首尾衔接自动轮播，实现最后一张图片无缝衔接第一张图片

直接看效果吧，符合各位需求就拿走

上代码：主要就wxss来控制

.graphic-list{
  width: 100%;
  height: 280rpx;
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6rpx;
  overflow: hidden;
}
.graphic .gl-vr {
  flex: 1;
  border-radius: 6rpx;
  overflow: hidden;
}
/* 移动图片 */
.graphic-box {
  position: relative;
  width: 100%;
  height: 280rpx;
  overflow: hidden;
  border-radius: 6rpx;
}
.graphic-content {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  animation: mymove 10s infinite;
  animation-timing-function: linear;
  border-radius: 6rpx;
  overflow: hidden;
}
.graphic-child {
  width: 400rpx;
  height: 100%;
  border-radius: 6rpx;
  overflow: hidden;
}
@keyframes mymove {
  0% {
      transform: translateX(0rpx);
  }
  100% {
      transform: translateX(-800rpx);
  }
}

<view class="graphic-box">
      <view class="graphic-content">
          <image class="graphic-child" src="../../images/left.jpg" mode="aspectFilt"></image>
          <image class="graphic-child" src="../../images/right.jpg" mode="aspectFilt"></image>
          <image class="graphic-child" src="../../images/left.jpg" mode="aspectFilt"></image>
          <image class="graphic-child" src="../../images/right.jpg" mode="aspectFilt"></image>
      </view>
  </view>

当学习记录了，之前不懂时候弄了挺久的，后来想明白了就觉得也就这么回事，有什么问题可以评论交流互相学习