JS实现轮播图+圆点

HTML代码：

<div class="banner">
			<div class="ban">
			</div>
		</div>
		<div class="bot">
			<ul>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
			
		</div>

CSS代码：

.ban>img {
	width: 412px;
	height: 250px;

}

.ban {
	width: auto;
	height: 250px;
	display: flex;
	position: absolute;

}

.banner {
	width: 100%;
	height: 250px;
	position: relative;
	overflow: hidden;
	margin-bottom: 47px;

}

JS代码：

function banner(data) {
	for (let i = 0; i < data.data.trends.length; i++) {

		ner += `<img src="图片路径" alt=""/>`
	}
	ner += `<img src="图片路径" alt=""/>`
	$('.ban').html(ner);
	// 获取图片宽度
	widh = $('.ban>img').eq(0).width();
	console.log(widh);
	// 获取图片数组
	imgNum = $('.ban>img');
	// 设置永久性定时器

}
let timeBanner = setInterval(bann, 2000);
// 设置下标
var num = 0;
// 定义函数
numUl[0].style.color = 'red';

function bann() {
	// num自加1
	num++;
	// 设置ban的样式 过度 
	$('.ban').css('transition', 'all 1s');
	// 设置滑动
	$('.ban').css('margin-left', '-' + num * widh + 'px');
	// 当下标等于最后一位时
	if (num == imgNum.length - 1) {
		// 设置一次性定时器，纵享丝滑
		setTimeout(function() {
			//下标设为0
			num = 0;
			// 过渡效果删去
			$('.ban').css('transition', '');
			// 将图片设为第一张
			$('.ban').css('margin-left', '-' + 0 + 'px');

		}, 1000)
		// 第一个圆点颜色设为红色
		numUl[0].style.color = 'red';
		// 最后一个设为黑色
		numUl[numUl.length - 1].style.color = 'black';
	} else {
		// 第num个设为红色
		numUl[num].style.color = 'red';
		// 第num-1个设为黑色
		numUl[num - 1].style.color = 'black';

	}
}

ヾ(•ω•`)oByeBye~