css js点击换图片 |css下拉框内容样式

/* CSS 代码 */
.img-container {
position: relative;
width: 300px;
height: 200px;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.img-container img.active {
opacity: 1;
}
/* JS 代码 */
const imgs = document.querySelectorAll('.img-container img');
let index = 0;
function changeImg() {
imgs[index].classList.remove('active');
index++;
if (index === imgs.length) {
index = 0;
}
imgs[index].classList.add('active');
}
setInterval(changeImg, 3000);

首先，大家给图片容器设置了一个相对定位，并给其中的图片设置绝对定位，从而让这些图片重叠在一起。然后，大家给图片设置了一个透明度为 0 的初始状态，并在切换图片时，使用了 CSS 的过渡效果，让图片逐渐显示出来。

而在 JS 中，大家使用了一个 changeImg 函数来切换图片。每隔三秒钟，该函数便会被触发一次，从而将当前显示图片的透明度设为 0，接着将图片索引 index 加 1，最后将下一张图片的透明度设为 1，并通过给图片添加 active 类名来实现图片的切换。

通过这样的方式，大家就可以轻松地实现点击换图片的功能了。如果您需要实现更加丰富的交互效果，例如鼠标悬停时暂停切换、左右按钮控制切换等，您还可以对以上代码进行修改，实现您所需的功能。