css无缝切换图片 |h5 css教程

/* CSS 代码 */
img {
position: absolute;  /* 图片绝对定位，实现重叠 */
transition: opacity 1s;  /* 过渡效果，让图片淡入淡出 */
}
img:first-child {
opacity: 1;  /* 初始显示第一张图片 */
}
img:not(:first-child) {
opacity: 0;  /* 其它图片透明度为 0，隐藏起来 */
}

通过上述 CSS 代码，大家使所有图片绝对定位，并在样式中添加了 transition 属性，它是实现淡入淡出效果的关键属性。接着设置第一张图片的 opacity 为 1，其它图片的 opacity 为 0，就可以实现最开始只显示第一张图片，其它图片处于隐藏状态。

接下来就是核心代码，通过 JavaScript 来切换图片：

/* JavaScript 代码 */
let i = 0;
let images = document.querySelectorAll('img');
setInterval(() =>{
images[i].style.opacity = 0;  /* 把当前图片透明度设为 0 */
i = (i + 1) % images.length;  /* 切换图片 */
images[i].style.opacity = 1;  /* 把下一张图片透明度设为 1 */
}, 2000);

上面的代码先声明一个变量 i 用来记录当前显示的图片的索引，然后使用 document.querySelectorAll() 方法获取所有图片，并用 setInterval() 方法来定时执行切换图片的代码。切换时将当前图片的 opacity 设为 0，然后通过 i 来切换到下一张图片并将其 opacity 设为 1，就实现了图片的无缝轮播。

通过上述的 CSS 和 JavaScript 代码，大家就可以实现 CSS 无缝切换图片的效果了。