如何用纯css同时实现轮播图自动轮播和点击轮播

Question

1、实现多张图片自动轮播
2、图片下方有圆圈按钮，当图片轮播，对应圆圈按钮对应轮播
3、点击圆圈按钮，跳动到对应图片

Answer 1

点击是互动 需要js才能实现
css能做自动轮播
参考一下

css实现滚屏展示效果_hello world-CSDN博客_css 自动滚屏效果 我这里是20条数据循环展示，页面同时能展示四条数据，一次循环20s实现无缝滑动需要把前四条数据加到最后，否则会出现数据瞬变（因为循环结束会瞬间拉回，原来位置重新向下滑动），也就是有24条数据不说废话，直接上代码实现滑动功能的主要代码@keyframes myMove { 0% { transform: translateY(0); } 100% { transform: translateY(-500%);//我是按百分比设定高度，所以下滑的距离是5* https://blog.csdn.net/KingJordon/article/details/106018931?spm=1001.2014.3001.5502