我需要一段js兼容ie8的轮播图

以下是一段兼容IE8的简单轮播图代码：

HTML代码：

<div id="slider">
  <ul>
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
  <a href="#" id="prev">Prev</a>
  <a href="#" id="next">Next</a>
</div>

CSS样式：

#slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
#slider ul {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 1800px; /* 3 images * 600px */
  left: 0;
}
#slider li {
  float: left;
  width: 600px;
  height: 400px;
}
#slider img {
  width: 100%;
  height: 100%;
}
#slider a {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  z-index: 2;
}
#slider #prev {
  left: 20px;
}
#slider #next {
  right: 20px;
}

JavaScript代码：

var slider = document.getElementById('slider');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var ul = slider.getElementsByTagName('ul')[0];
var liArr = slider.getElementsByTagName('li');
var imgWidth = liArr[0].offsetWidth;
var index = 0;

prev.onclick = function() {
  index--;
  if (index < 0) {
    index = liArr.length - 1;
  }
  ul.style.left = -index * imgWidth + 'px';
};

next.onclick = function() {
  index++;
  if (index >= liArr.length) {
    index = 0;
  }
  ul.style.left = -index * imgWidth + 'px';
};

以上代码实现了一个简单的图片轮播图，点击“Prev”和“Next”按钮可以切换图片。在IE8中测试通过。