请求大神 帮我改成轮播图 要用原生js

wxq666

HTML代码如下

[HTML] 纯文本查看 复制代码

			<!-- 轮播图 -->
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12">
					<div class="wrap">
						<a href="#" class="arrow-l"> < </a>
						<a href="#" class="arrow-r"> > </a>
						<ul>
							<li>
								<a href="#"> <img src="img/t8.jpg" > </a>
							</li>
						</ul>
						<ol class="circle">
							<li class="on">1</li>
							<li>2</li>
							<li>3</li>
						</ol>
					</div>
				</div>
			</div>

CSS代码如下

[CSS] 纯文本查看 复制代码

.wrap{
	position: relative;
	margin: 30px auto;
	height: auto;
}
.wrap ul{
	height: auto;
}
.wrap ul li a{
	display: block;
}
.wrap ul li a img{
	width: 100%;
}
.arrow-l,
.arrow-r{
	position: absolute;
	top: 50%;
	color: #fff;
	font-size: 18px;
	border: 1px solid #000000;
	padding: 5px;
	background: rgba(0,0,0,.6);
}
.arrow-r{
	right: 0;
}
.circle{
	position: absolute;
	left: 50%;
	bottom: 10px;
}
.circle li{
	float: left;
	width: 15px;
	height: 15px;
	list-style: none;
	line-height: 15px;
	text-align: center;
	border-radius: 50%;
	margin: 0 9px;
	cursor: pointer;
	background: #fff;
}
.circle .on{
	background-color: orange;
}

lifeixue

好久没写过轮播图了，当练练手，花了一两个小时用的原生js写的，ES6和jQuery都没用
https://wwa.lanzoui.com/iASPCvfaxdc

蓝色魅影

授人以鱼不如授人以渔 可以参考下我之前写过的轮播图的一个作业：https://www.aliyundrive.com/s/SMw3BEbwHWx
有几种方式，我这个是JS定时器加改class，还有改位置、改透明度、遮挡的方法等等