SOURCE

/**
* @param {number} duration 每次轮播的过渡时间
* @param {number} keepClickTime 控制左右按钮的每次点击间隔时间
* @return {undefined}
*/
((duration, keepClickTime) => {
	const container = document.querySelector('.carousel-container')
	const tar = container.querySelector('.items')
	const controlBtn = container.querySelector('.controller')
	const controlIndex = container.querySelector('.controller-index')
	let baseVal = 0
	let nowLeft = 0
	let len = tar.childElementCount
	let moveOnce = tar.firstElementChild.offsetWidth
	let maxVal = -moveOnce*(len-1)
	let timer = null
	let now = new Date()
	let indexHtml = ''
	let indexList = null
	let indexIsExist = false
	tar.style.width = `${len*moveOnce}px`
	for (let i = 0; i < len; i++) {
		indexHtml += `<li class="${i === 0 ? 'active': ''}"></li>`
	}
	controlIndex.innerHTML = indexHtml
	function toggleItem (e) {
		if (new Date() - now > keepClickTime) {
			clearInterval(timer)
			let tmpTar = e.target.className
			let preBtn = tmpTar === 'control-pre'
			let nextBtn = tmpTar === 'control-next'
			if (preBtn && nowLeft) {
				nowLeft += moveOnce
				toggleIndex('left')
			} else if (preBtn && !nowLeft) {
				nowLeft = maxVal
				toggleIndex('left')
			}
			if (nextBtn && nowLeft !== maxVal) {
				nowLeft -= moveOnce
				toggleIndex('right')
			} else if (nextBtn && nowLeft === maxVal) {
				nowLeft = 0
				toggleIndex('right')
			}
			tar.style.left = nowLeft + 'px'
			now = new Date()
		}
	}

	function keepToggle () {
		toggleIndex('right')
		nowLeft -= moveOnce
		nowLeft %= -moveOnce*len
		tar.style.left = nowLeft + 'px'
	}

	function toggleIndex (direction) {
		if (direction === 'right') {
			baseVal ++
			baseVal %= len
		}
		if (direction === 'left') {
			baseVal ? baseVal -- : baseVal = len - 1
		}
		controlIndex.querySelector('li.active').classList.remove('active')
		controlIndex.getElementsByTagName('li')[baseVal].classList.add('active')
		if (!indexIsExist) {
			Array
				.from(controlIndex.getElementsByTagName('li'))
				.forEach((item, i) => {
					item.addEventListener('click', jumpIndex.bind(item, i))
				})
		}
		indexIsExist = true
	}

	function jumpIndex (i) {
		clearInterval(timer)
		baseVal = i
		nowLeft = i < baseVal ? baseVal*moveOnce : -baseVal*moveOnce
		controlIndex.querySelector('li.active').classList.remove('active')
		controlIndex.getElementsByTagName('li')[i].classList.add('active')
		tar.style.left = nowLeft + 'px'
	}

	timer = setInterval(keepToggle, duration)
	controlBtn.addEventListener('click', toggleItem)
	container.addEventListener('mouseenter', () => clearInterval(timer))
	container.addEventListener('mouseleave', () => timer = setInterval(keepToggle, duration))
})(3000, 1000)

<div class="carousel-container">
  <div class="items">
    <div class="c-item">1</div>
    <div class="c-item">2</div>
		<div class="c-item">3</div>
		<div class="c-item">4</div>
  </div>
  <div class="controller">
    <span class="control-pre"><</span>
    <span class="control-next">></span>
  </div>
	<ul class="controller-index"></ul>
</div>

.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-container,
.carousel-container .c-item {
  width: 300px;
  height: 250px;
}

.carousel-container > .items {
  height: 100%;
  background-color: #ddd;
  position: relative;
  left: 0;
  transition: left .5s ease-in-out;
}

.carousel-container > .items > .c-item {
  float: left;
}

.carousel-container > .items > .c-item:nth-child(1) {
  background-color: blue;
}

.carousel-container > .items > .c-item:nth-child(2) {
  background-color: yellow;
}

.carousel-container > .items > .c-item:nth-child(3) {
  background-color: green;
}

.carousel-container > .items > .c-item:nth-child(4) {
  background-color: pink;
}

.carousel-container > .controller {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
}

.carousel-container > .controller > [class^="control"] {
  font-size: 50px;
  cursor: pointer;
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.carousel-container > .controller [class$="pre"] {
  float: left;
}

.carousel-container > .controller [class$="next"] {
  float: right;
}

.carousel-container > .controller-index {
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.carousel-container > .controller-index li {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  margin: 2px;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-container > .controller-index li.active {
  background-color: #fff;
}