自定义进度条上带一张图片跟着走

可以使用CSS样式实现自定义进度条，并在进度条上添加一张图片。

首先，在HTML中创建带有进度条和图片的元素，如下所示：

<div class="progress">
  <div class="progress-bar">
    <img src="image.jpg" alt="Progress Image">
  </div>
</div>

然后，在CSS中定义进度条和图片的样式，如下所示：

.progress {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
  border-radius: 10px;
  position: relative;
}

.progress-bar img {
  position: absolute;
  top: -50%;
  left: 100%;
  transform: translate(-50%, -50%);
}

其中，`.progress` 定义了进度条的背景颜色和边框圆角等基本样式，`.progress-bar` 定义了进度条的颜色和宽度等样式，`.progress-bar img` 定义了图片的位置和偏移量等样式。

最后，使用JavaScript动态修改 `.progress-bar` 的宽度，使其进行进度更新，如下所示：

var progress = document.querySelector('.progress-bar');
var width = 0;

function updateProgress() {
  if (width >= 100) {
    clearInterval(intervalId);
  } else {
    width++;
    progress.style.width = width + '%';
  }
}

var intervalId = setInterval(updateProgress, 50);

这样，就可以实现自定义进度条上带一张图片跟着走的效果了。