实现四张图片自动轮播有五种方法：一、纯CSS通过radio+@keyframes控制显隐；二、原生JS定时切换src；三、Flexbox+JS切换active类；四、混合模式支持点击与自动轮播；五、transform+translateX实现滑动效果。
如果您希望在网页中展示四张图片并实现自动轮播切换效果，则需要通过HTML结构配合CSS样式和JavaScript逻辑来完成。以下是实现此功能的多种方法：
一、使用纯CSS实现四张图片轮播
该方法利用CSS的@keyframes动画与input[type="radio"]或:checked伪类控制图片显隐，无需JavaScript，适合静态页面且对兼容性要求不高的场景。
1、在HTML中创建四个隐藏的单选按钮，每个对应一张图片，并为每张图片设置唯一ID及关联label。
2、为所有图片容器设置position: relative，每张图片设置position: absolute、top: 0、left: 0，并默认opacity: 0。
立即学习“前端免费学习笔记（深入）”；
3、为每个:checked单选按钮编写CSS规则，例如#img1:checked ~ .slides img:nth-of-type(1) { opacity: 1; transition: opacity 0.5s ease; }。
4、添加@keyframes定义循环动画，配合animation-delay控制四张图依次显示，周期设为总时长（如8s），每张图停留2s。
二、使用原生JavaScript手动控制四张图片切换
该方法通过定时器驱动索引变量变化，动态修改图片元素的src属性或显隐状态，逻辑清晰、易于调试和定制。
1、在HTML中定义一个标签，并为其设置id="carouselImage"。
2、在JavaScript中声明图片数组：const images = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];。
3、声明当前索引变量let currentIndex = 0;，并定义changeImage()函数，在其中更新img元素的src为images[currentIndex]。
4、使用setInterval调用changeImage，间隔设为3000毫秒；每次执行后将currentIndex递增，到达3后重置为0。
三、使用CSS Flexbox + JavaScript控制类名切换
该方法将四张图片放入一个flex容器，仅显示当前激活项，通过切换active类控制可见性，提升样式解耦度与过渡效果灵活性。
1、HTML中构建
简单实用原生js实现带缩略图文字说明左右轮播切换相册插件下载。一款基于原生JavaScript实现图片相册幻灯轮播图特效插件，没有引入任何jQuery库，短短数行原生php中文网实现。
- ，内部包含四个
- ，每个内含
标签。
2、CSS中设置.carousel { display: flex; overflow: hidden; }，每个.slide { min-width: 100%; opacity: 0; transition: opacity 0.4s ease; }。
3、为.active类定义opacity: 1;，并通过JavaScript在指定时间点移除所有.active，再为当前索引对应的li添加.active。
4、初始化定时器，每2500ms执行一次切换，索引按模4递进：currentIndex = (currentIndex + 1) % 4。
四、使用事件绑定实现点击手动切换+自动轮播混合模式
该方法同时支持用户点击左右箭头手动切换，以及后台自动轮播，增强交互体验与可控性。
1、HTML中添加左右箭头按钮：
2、为#nextBtn绑定click事件，触发nextSlide()函数；为#prevBtn绑定click事件，触发prevSlide()函数。
3、定义nextSlide()函数：currentIndex = (currentIndex + 1) % 4；prevSlide()函数：currentIndex = (currentIndex - 1 + 4) % 4。
4、在每次切换后重置自动轮播计时器：clearInterval(autoPlayTimer); autoPlayTimer = setInterval(nextSlide, 3000);。
五、使用CSS transform + translateX实现滑动式轮播
该方法通过改变容器的transform: translateX值使图片组水平位移，模拟滑动效果，视觉更自然且性能较佳。
1、HTML中将四张图片放入
