html,css实现图片轮播

html:

• 
• 
• 
• 
• 

    <!--末尾补一个首尾数据-->
    <li>
        <img src="4cdca0ed47bdc97f0638dc1366d5652.jpg">
    </li>
</ul>

css: *{ padding:0;margin:0; } li{ list-style:none; }

body, html {
width: 100%;
height: 100%;
display: flex;
}

:root {

--w: 400;
--speed: 1.5s;

}

.g-container {
width: 400px;
margin: auto;
height: 240px;
line-height: 240px;
font-size: 20px;
background: #673ab7;
color: #fff;
overflow: hidden;
border: 2px solid #000;
}

ul {
display: flex;
flex-wrap: nowrap;
}

ul li {
flex-shrink: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}

ul li img {
width: 100%;
height: 100%;
object-fit: cover;
}

ul {
animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}

ul li {
white-space: nowrap;
cursor: pointer;
animation: move1 calc(var(--speed)) infinite;
}

@keyframes move {
0% {
transform: translate(0, 0px);
}
100% {
transform: translate(calc(var(--s) * var(--w) * -1px), 0);
}
}

@keyframes move1 {
0% {
transform: translate(0, 0px);
}
80%,
100% {
transform: translate(calc(var(--w) * -1px), 0);
}
}