js通栏轮播

// 示例代码：设置定时器自动播放轮播图
let index = 0;
const images = document.querySelectorAll('.carousel img');
function autoPlay() {
    images[index].style.display = 'none';
    index = (index + 1) % images.length;
    images[index].style.display = 'block';
}
setInterval(autoPlay, 3000); // 每3秒切换一次

/* 示例代码：优化CSS过渡效果 */
.carousel img {
    transition: opacity 1s ease-in-out;
    opacity: 0;
    position: absolute;
}
.carousel img.active {
    opacity: 1;
}

/* 示例代码：添加响应式布局支持 */
@media (max-width: 768px) {
    .carousel {
        width: 100%;
    }
    .carousel img {
        width: 100%;
        height: auto;
    }
}