JS如何实现竖屏轮播图

大家好 我是板砖 今天给大家分享一下我自己做的竖屏轮播图 这个轮播图老好用了 这个demo是适配的，话不多说 上代码：

html：

<div id="banner" class="echarts_one" style="overflow: hidden;position: relative;">
							<div class="banner_list">
								<img src="第1张图片路径" alt="" />
								<img src="第2张图片路径" alt="" />
								<img src="第3张图片路径" alt="" />
								<img src="第4张图片路径" alt="" />
								<img src="第1张图片路径" alt="" />
							</div>
							<!-- 轮播图的小圆点 -->
							<div class="round"></div>
						</div>

css:

.echarts_one {
	width: 100%;
	height: calc(100% - 30px);
}

.banner_list {
	width: 100%;
	display: flex;
	flex-direction: column;
	/* margin-top: -328px; */
}

.round {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: absolute;
	justify-content: space-around;
	top: 100px;
	right: 0;
	width: 10px;
	height: 100px;
}

.round span {
	width: 3px;
	height: 10px;
	background-color: #bfc0c1;
	border-radius: 5px;
}

js:

let times = setInterval(banner, 3000);
function banner() {
	index++;
	//轮播图渲染
	let banner = document.getElementById('banner');
	let imgHidth = banner.offsetHeight;
	let round = document.getElementsByClassName('round')[0];
	$('.banner_list').css('height', (data.teacher.length + 1) * banner.offsetHeight);
	$('.banner_list').children().css('height', banner.offsetHeight);
	// console.log($('.banner_list').height());
	// console.log($('.banner_list').children());
	$('.banner_list').css('margin-top', -index * imgHidth + 'px').css('transition', 'all 0.5s');

	if (index == $('.banner_list').children().length - 1) {
		setTimeout(function() {
			index = 0;
			$('.banner_list').css('transition', '').css('margin-top', '0px');
		}, 500);
		round.children[0].style.backgroundColor = '#515151';
		round.children[$('.banner_list').children().length - 2].style.backgroundColor = '#bfc0c1';
	} else {
		round.children[index].style.backgroundColor = '#515151';
		round.children[index - 1].style.backgroundColor = '#bfc0c1';
	}
}