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() {
  var targetIndex = currentIndex + 1;
  handleIndexChange(targetIndex);
}

elArrowLeft.onclick = function() {
  var targetIndex = currentIndex - 1;
  handleIndexChange(targetIndex);
}

elIndicatorList.onclick = function(event) {
  var target = event.target;
  if (!target.classList.contains('indicator-item')) {
    return;
  }

  var targetIndex = parseInt(target.dataset.index, 10);
  handleIndexChange(targetIndex);
}

function handleIndexChange(targetIndex) {
  if (targetIndex === currentIndex) {
    return;
  }
  changeCurrentIndex(targetIndex);
  changeCurrentClass();
}

function changeCurrentIndex(targetIndex) {
  if (targetIndex >= listLength) {
    currentIndex = 0;
  } else if (targetIndex < 0) {
    currentIndex = listLength - 1;
  } else {
    currentIndex = targetIndex;
  }
}

function changeCurrentClass() {
  document.querySelector('.carousel-item_current').classList.remove('carousel-item_current');
  elListCarouselItem[currentIndex].classList.add('carousel-item_current');
  document.querySelector('.indicator-item_current').classList.remove('indicator-item_current');
  elIndicatorItem[currentIndex].classList.add('indicator-item_current');
}

<div class="carousel-wrapper">
  <div class="carousel-item carousel-item_current">
    <img class="carousel-item-img" src="https://i.loli.net/2020/04/10/kUOTSQnd6DAeXuW.jpg"
    alt="图片" />
  </div>
  <div class="carousel-item">
    <img class="carousel-item-img" src="
    https://i.loli.net/2020/04/10/2Q4cJyXblmpevCg.jpg" alt="图片" />
  </div>
  <div class="carousel-item">
    <img class="carousel-item-img" src="
    https://i.loli.net/2020/04/10/kJ3YZzRfGOsS9MN.jpg" alt="图片" />
  </div>
  <div class="carousel-item">
    <img class="carousel-item-img" src="
    https://i.loli.net/2020/04/10/bn2RQ8pxAe6Ygic.jpg" alt="图片" />
  </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;
}

.carousel-item-img {
  width: 100%;
  height: 100%;
}

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

.indicator-item {
  position: relative;
  background-color: #f6f6f6;
  width: 10px;
  height: 2.5px;
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
  cursor: pointer;
}

.indicator-item:after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  right: 0;
  /* background:pink; */
}

.indicator-item:hover {
  transform: scale(1.3);
}

.indicator-item_current {
  background-color: #00CCFF;
  transform: scale(1.3);
}

.arrow {
  background-color: rgba(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: rgba(0, 0, 0, 0.4);
}

.arrow-left {
  left: 15px;
}

.arrow-right {
  right: 15px;
}