SOURCE

var elArrowRight = document.querySelector('.arrow-right');
var elArrowLeft = document.querySelector('.arrow-left');
var elListCarouselItem = document.querySelectorAll('.carousel-item');

var elIndicatorList = document.querySelector('.indicator-list');
var elIndicatorItem = document.querySelectorAll('.indicator-item');

var currentIndex = 0;
var listLength = elListCarouselItem.length;

elArrowRight.onclick = function handleClick () {
  var oldIndex = currentIndex;
  
  if (currentIndex >= listLength-1) {
    currentIndex = 0;
    } else {
      currentIndex = currentIndex + 1;
    }
  
  // console.log('现在是第 ' + oldIndex + ' 图显示，应该改成第 ' + currentIndex + ' 图显示');
  elListCarouselItem[oldIndex].classList.remove('carousel-item_current');
  elListCarouselItem[currentIndex].classList.add('carousel-item_current');
  elIndicatorItem[oldIndex].classList.remove('indicator-item_current');
  elIndicatorItem[currentIndex].classList.add('indicator-item_current');
}

elArrowLeft.onclick = function handleClick() {
  var oldIndex = currentIndex;
  
  if (currentIndex <= 0) {
    currentIndex = listLength-1;
    } else {
      currentIndex = currentIndex - 1;
    }
  
  // console.log('现在是第 ' + oldIndex + ' 图显示，应该改成第 ' + currentIndex + ' 图显示');
  elListCarouselItem[oldIndex].classList.remove('carousel-item_current');
  elListCarouselItem[currentIndex].classList.add('carousel-item_current');
  elIndicatorItem[oldIndex].classList.remove('indicator-item_current');
  elIndicatorItem[currentIndex].classList.add('indicator-item_current');
}

elIndicatorList.onclick = function(event) {
  var target = event.target;
  
  if (!target.classList.contains('indicator-item')) { 
    return; 
  }
  
  var targetIndex = parseInt(target.dataset.index, 10);
  var oldIndex = currentIndex;
  
  elListCarouselItem[oldIndex].classList.remove('carousel-item_current');
  elListCarouselItem[targetIndex].classList.add('carousel-item_current');
  elIndicatorItem[oldIndex].classList.remove('indicator-item_current');
  elIndicatorItem[targetIndex].classList.add('indicator-item_current');
  // console.log(target);
  currentIndex = targetIndex;
}

<div class="carousel-wrapper">
        <div 
            class="carousel-item carousel-item_current"
            style="background-color: red;"
        >0</div>
        <div 
            class="carousel-item"
            style="background-color: yellow;"
        >1</div>
        <div 
            class="carousel-item"
            style="background-color: green;"
        >2</div>
        <div 
            class="carousel-item"
            style="background-color: blue;"
        >3</div>
        <div class="indicator-list">
            <span data-index = "0" class="indicator-item indicator-item_current"></span>
            <span data-index = "1" class="indicator-item"></span>
            <span data-index = "2" class="indicator-item"></span>
            <span data-index = "3" class="indicator-item"></span>
        </div>
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
    </div>

.carousel-wrapper {
    position: relative;
    width: 300px;
    height: 150px;
}

.carousel-item {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
}

.carousel-wrapper .carousel-item_current {
    display: block;
}

.indicator-list {
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 15px;
    z-index: 999;
    text-align: center;
    font-size: 0;
}

.indicator-item {
    background-color: rgb(87, 219, 26);
    width: 10px;
    height: 2.5px;
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer;
}

.indicator-item_current {
    background-color: royalblue;
}

.arrow {
    background-color: rgb(0, 0, 0, 0.2);
    position: absolute;
    display: inline-block;
    font-size: 15px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.arrow:hover {
    background-color: rgb(0, 0, 0, 0.4);
}

.arrow-left {
    left: 15px;
}

.arrow-right {
    right: 15px;
}