JS輪播圖一般是前端開發中比較常見的一個功能，它可以讓頁面上的圖片、文本等內容在一定時間間隔內自動輪播，給用戶帶來更好的瀏覽體驗。除了JavaScript實現輪播圖功能，CSS也發揮了很大作用，下面我們一起來學習一下如何實現JS輪播圖CSS樣式的編寫：

/* 輪播圖容器樣式 */
.carousel {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
/* 輪播圖圖片樣式 */
.carousel img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* 當前顯示圖片樣式 */
.carousel img.active {
opacity: 1;
}
/* 左右切換按鈕樣式 */
.carousel-prev, .carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.carousel-prev {
left: 20px;
}
.carousel-next {
right: 20px;
}

以上就是JS輪播圖CSS樣式的代碼實現，其中.carousel是輪播圖的容器，它的樣式設置了寬度、高度、相對定位和溢出隱藏等屬性。圖片的樣式設置了絕對定位、寬高、上下左右距離和透明度等屬性。在輪播圖中，只有當前顯示的圖片才有.active類的樣式設置。左右切換按鈕使用的是絕對定位，通過設置top和transform屬性實現了垂直居中，同時設置了左右距離、寬高等屬性。