html制作手动控制背景图片循环，图片路径要在html文件中，代码用js文件

好的，下面是实现步骤：

1. 在HTML文档中添加一个div元素来承载背景图片，如下所示：

<div id="bg"></div>

2. 在CSS文件中为这个div设置背景图片，并且设置宽高为100%：

#bg {
  background-size: cover;
  width: 100%;
  height: 100%;
}

3. 在JavaScript文件中编写代码，使背景图片循环播放，并且可以手动控制切换。代码如下：

var bgImages = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
var currentIndex = 0;
var bgElement = document.getElementById('bg');

function changeBackground() {
  bgElement.style.backgroundImage = 'url(' + bgImages[currentIndex] + ')';
  currentIndex++;
  if (currentIndex == bgImages.length) {
    currentIndex = 0;
  }
}

function prevBackground() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = bgImages.length - 1;
  }
  bgElement.style.backgroundImage = 'url(' + bgImages[currentIndex] + ')';
}

function nextBackground() {
  currentIndex++;
  if (currentIndex == bgImages.length) {
    currentIndex = 0;
  }
  bgElement.style.backgroundImage = 'url(' + bgImages[currentIndex] + ')';
}

setInterval(changeBackground, 5000); // 每5秒更换一次背景图片

以上代码中，我们首先定义了一个包含多个背景图片路径的数组，然后使用一个变量来记录当前显示的背景图片索引。接着编写了一个函数来切换背景图片，并且每次调用该函数时，都将currentIndex加1。当currentIndex等于数组长度时，意味着已经循环到了最后一张图片，那么我们要将currentIndex重置为0，重新开始循环。同时，我们也编写了prevBackground和nextBackground函数，分别用于手动切换到上一张或下一张背景图片。

最后使用setInterval函数来定时调用changeBackground函数，从而实现背景图片的循环播放。同时，我们也可以通过调用prevBackground和nextBackground函数来手动切换背景图片。

希望这个回答能够帮助到你！