html 图片循环轮播,如何在Web端实现动画切换效果一致的无限循环图片轮播？

实现无缝切换可以多加两张图，在第一张前面加上最后一张图，在最后一张图后面加上第一张图。刚好之前写过一个，JS原生，具体代码如下：

html

轮播图

.wrap{

width: 900px;

height: 500px;

overflow: hidden;

margin: 0 auto;

margin-top: 50px;

position: relative;

}

.list{

position: absolute;

width: 5400px;

}

img{

width: 900px;

height: 500px;

float: left;

}

a{

text-decoration: none;

position: absolute;

top:200px;

display: inline-block;

width: 85px;

line-height: 70px;

background: rgba(3,3,3,.3);

color: #fff;

font-weight: 700;

font-size: 50px;

text-align: center;

display: none;

}

.buttons{

position: absolute;

bottom: 20px;

width: 100%;

text-align: center;

}

span{

width: 15px;

height: 15px;

border-radius: 50%;

display: inline-block;

cursor: pointer;

border: 1px solid #fff;

}

span~span{

margin-left: 20px;

}