帮我写一个js的走马灯

以下是一个简单的JavaScript走马灯示例：

HTML代码：

<div id="carousel">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
  </ul>
</div>

CSS代码：

#carousel {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

#carousel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

#carousel ul li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#carousel ul li.current {
  opacity: 1;
}

#carousel ul li img {
  width: 100%;
  height: 100%;
}

JavaScript代码：

var carousel = document.getElementById('carousel');
var ul = carousel.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
var currentIndex = 0;
var timer;

// 初始化
li[currentIndex].classList.add('current');

function slide() {
  // 隐藏当前图片
  li[currentIndex].classList.remove('current');
  // 计算下一张图片的索引
  currentIndex = (currentIndex + 1) % li.length;
  // 显示下一张图片
  li[currentIndex].classList.add('current');
}

// 开始轮播
timer = setInterval(slide, 3000);

// 鼠标移入停止轮播，移出继续轮播
carousel.addEventListener('mouseover', function() {
  clearInterval(timer);
});

carousel.addEventListener('mouseout', function() {
  timer = setInterval(slide, 3000);
});

这个走马灯使用CSS的position: absolute和opacity属性来实现图片的切换效果。JavaScript代码用setInterval函数来定时切换图片，并用addEventListener函数来监听鼠标事件，实现鼠标移入停止轮播，移出继续轮播的效果。