HTML

<section>
    <div class="imgs">
      <img src="./resources/1.jpg" alt="1">
      <img src="./resources/2.jpeg" alt="2">
      <img src="./resources/3.jpeg" alt="3">
      <img src="./resources/4.jpeg" alt="4">
      <img src="./resources/5.jpg" alt="5">
    </div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

    <a href="javascript:;">&lt;</a>
    <a href="javascript:;">&gt;</a>
  </section>

Javascript

  var sec = document.getElementsByTagName('section')[0];
  var imgs = document.getElementsByClassName('imgs')[0];
  var ul = document.getElementsByTagName('ul')[0];
  var li = document.getElementsByTagName('li');
  var pre = document.getElementsByTagName('a')[0];
  var next = document.getElementsByTagName('a')[1];

  var timer = null;

  // 预加载
  window.onload = function() {
    start;
    imgs.style.left = '0px';
    li[0].style.background = '#f64';
  }

  // 轮播核心功能
  function animals(offset) {
    var preLeft = parseInt(imgs.style.left);
    var newOffset = preLeft + offset
    imgs.style.left = newOffset + 'px';
    
    var number = newOffset / (-600);
    lis(number);

    // 控制幻灯片边界（尾部）
    if(newOffset < -2400) {
      imgs.style.left = 0 + 'px';
    }
    // 控制幻灯片边界 (首部)
    if(newOffset > 0){
			imgs.style.left = -2400+'px';
		}

  }

  function lis(number) {
    // 规避首尾幻灯片的异常情况
    if(number > 4) number = 0;
    if(number == -1) number = 4;

    // 设置小圆点轮播时的样式
    for(var i = 0;i < 5; i ++) {
      if(number == i) li[i].style.background = "#f64";
      else li[i].style.background = "white";
    }
  }

  // 点击序号
  ul.addEventListener('click', (e) => { 
    lis(e.target.innerHTML - 1); 
    imgs.style.left = (-600) * (e.target.innerHTML - 1) + 'px';
  })

  // 点击左右箭头
  pre.onclick = ()=> animals(600);
  next.onclick = ()=> animals(-600);

  // 设置开始和停止的定时器
  start = ()=> timer = setInterval(() => { animals(-600) }, 2000);
  stop = ()=> timer = clearInterval(timer);

  sec.onmouseleave = start;
  sec.onmouseenter = stop;

CSS

* {
  margin:0;
  padding: 0;
}

section {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.imgs {
  width: 3000px;
  height: 300px;
  position: absolute;
  transition: all 1s;
}

.imgs img {
  width: 600px;
  height: 300px;
  float: left;
}

section a {
  position:absolute;
  color: white;
  top: 110px;
  text-decoration: none;
  font-weight: bold;
  font-size: 40px;
  background: rgba(0, 0, 0, .2);
  border-radius: 10px;
  padding: 0 5px 5px 5px;
}

section:hover a {
  background: rgba(0, 0, 0, .8);
  transition: all 1s;
}

section a:last-child {
  left: 560px;
}

section ul {
  position: absolute;
  display: flex;
  list-style: none;
  width: 100px;
  bottom: 10px;
  left: 250px;
}

section ul li {
  flex: 1;
  border-radius: 50%;
  background-color: white;
  text-align: center; 
  margin: 3px;
  font-size: 10px;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
}