请求大神 帮我改成轮播图 要用原生js
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代码如下
.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;
}
好久没写过轮播图了，当练练手，花了一两个小时用的原生js写的，ES6和jQuery都没用
https://wwa.lanzoui.com/iASPCvfaxdc 本帖最后由 蓝色魅影 于 2021-10-16 21:39 编辑
授人以鱼不如授人以渔 可以参考下我之前写过的轮播图的一个作业：https://www.aliyundrive.com/s/SMw3BEbwHWx
有几种方式，我这个是JS定时器加改class，还有改位置、改透明度、遮挡的方法等等
页:
[1]