请帮我写出一个轮播图，一共有八张图片往左移动，图片在左边消失后排到右边继续往左移动，轮播图里只显示四张图片间隔30px其余的隐藏，点击左右按钮可以按照按钮移动一个图片大小的像素，轮播图容器为1200px，图片大小为300px。

好的，以下是一个简单的轮播图的HTML和CSS代码，你可以将其嵌入到你的网页中。需要注意的是，这里只提供了HTML和CSS代码，需要使用JavaScript实现轮播图的功能。

HTML代码：

<div class="slider">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
    <img src="image5.jpg" alt="">
    <img src="image6.jpg" alt="">
    <img src="image7.jpg" alt="">
    <img src="image8.jpg" alt="">
  </div>
  <div class="slider-controls">
    <button class="slider-control-prev">&lt;</button>
    <button class="slider-control-next">&gt;</button>
  </div>
</div>

CSS代码：

.slider {
  width: 1200px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  width: 2400px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  width: 300px;
  height: 300px;
  float: left;
  margin-right: 30px;
}

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

.slider-control-prev,
.slider-control-next {
  background-color: transparent;
  border: none;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

.slider-control-prev {
  margin-right: 20px;
}

JavaScript代码：

// 获取元素
var slider = document.querySelector('.slider');
var sliderWrapper = slider.querySelector('.slider-wrapper');
var sliderImages = sliderWrapper.querySelectorAll('img');
var sliderPrev = slider.querySelector('.slider-control-prev');
var sliderNext = slider.querySelector('.slider-control-next');

// 设置变量
var imageCount = sliderImages.length;
var imageWidth = sliderImages[0].offsetWidth + 30;
var currentImage = 0;

// 设置初始位置
sliderWrapper.style.width = (imageWidth * imageCount) + 'px';

// 添加事件监听器
sliderPrev.addEventListener('click', function() {
  moveSlider(-imageWidth);
});
sliderNext.addEventListener('click', function() {
  moveSlider(imageWidth);
});

// 移动轮播图
function moveSlider(offset) {
  var newPosition = currentImage + offset / imageWidth;
  if (newPosition < 0 || newPosition >= imageCount - 4) {
    return;
  }
  currentImage = newPosition;
  sliderWrapper.style.left = (-currentImage * imageWidth) + 'px';
}

这个轮播图是一个简单的版本，你可以根据自己的需求进行修改和扩展。