CSS JS 輪播代碼是一種常見的網頁動態效果，在很多網站中都能看到它的身影。通過代碼實現圖片、文字等內容在網頁上的來回切換，給人一種視覺上的感官沖擊。

//CSS 代碼
.carousel {
overflow: hidden; //隱藏 overflow 超出部分
position: relative; //相對定位
}
.carousel .slider {
display: flex; //flex 布局，讓子元素在一條線上
width: 100%; //寬度為 100%
}
.carousel .slider .slide {
flex-shrink: 0; //防止超出
width: 100%; //寬度為 100%
}
//JS 代碼
let carousel = document.querySelector('.carousel');
let slider = carousel.querySelector('.slider');
let slides = carousel.querySelectorAll('.slide');
let currentIndex = 0; //當前顯示的圖片下標
let timer = null;
// 輪播函數
function slideTo(index) {
slider.style.transform = `translateX(-${index * 100}%)`;
currentIndex = index;
}
// 自動輪播函數
function autoSlide() {
timer = setInterval(()=>{
let index = currentIndex + 1;
if (index === slides.length) {
index = 0;
}
slideTo(index)
}, 3000)
}
// 停止自動輪播函數
function stopAutoSlide() {
clearInterval(timer);
}
// 開始輪播
autoSlide();
// 監聽鼠標進入和離開事件
carousel.addEventListener('mouseenter', ()=>{
stopAutoSlide();
});
carousel.addEventListener('mouseleave', ()=>{
autoSlide();
});

這就是 CSS JS 輪播代碼的實現過程，其中 CSS 代碼主要用于布局和美化，JS 代碼用于實現輪播效果和控制。輪播代碼可以適用于圖片展示、廣告宣傳、產品推廣等多種場景，可以讓網站更加動態有活力。