我需要一个使用js和HTML5制作一个图片轮播手动控制的效果

好的，以下是一个简单的例子，你可以参考一下：

HTML代码：

<div class="slider">
  <img src="img1.jpg" alt="Image 1" class="active">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
  <div class="controls">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>

CSS代码：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.controls button {
  background-color: #fff;
  border: 1px solid #000;
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 16px;
  cursor: pointer;
}

JavaScript代码：

var slides = document.querySelectorAll('.slider img');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var currentIndex = 0;

function showSlide(index) {
  slides[currentIndex].classList.remove('active');
  slides[index].classList.add('active');
  currentIndex = index;
}

prevBtn.addEventListener('click', function() {
  var index = currentIndex - 1;
  if (index < 0) {
    index = slides.length - 1;
  }
  showSlide(index);
});

nextBtn.addEventListener('click', function() {
  var index = currentIndex + 1;
  if (index >= slides.length) {
    index = 0;
  }
  showSlide(index);
});

解释一下代码：

首先，我们用HTML创建了一个`<div>`元素作为轮播容器，其中包含了三张图片和两个按钮（上一张和下一张），图片是用`<img>`元素来表示的，按钮是用`<button>`元素来表示的。

然后，用CSS设置了轮播容器的样式，包括宽度、高度、溢出隐藏等，还设置了图片的样式，包括绝对定位、透明度、过渡效果等。

最后，用JavaScript实现了轮播功能，首先获取了所有的图片和按钮元素，然后定义了一个`showSlide()`函数来显示指定索引的图片，接着给按钮绑定了点击事件，点击上一张按钮时，显示当前索引减1的图片，如果当前索引已经是第一张图片了，则显示最后一张图片；点击下一张按钮时，显示当前索引加1的图片，如果当前索引已经是最后一张图片了，则显示第一张图片。

以上是一个简单的图片轮播手动控制的实现，你可以根据自己的需求进行适当的修改和完善。