CSS商城圖片輪播

<div class="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<style>
.carousel {
position: relative; /* 父元素相對定位 */
height: 300px; /* 輪播區域高度 */
overflow: hidden; /* 隱藏溢出部分 */
}
.carousel img {
position: absolute; /* 絕對定位 */
top: 0;
left: 0;
width: 100%; /* 圖片寬度為輪播區域寬度 */
transition: transform 0.5s ease-in-out; /* 動畫效果 */
}
.carousel img:last-child {
position: absolute; /* 絕對定位 */
top: 0;
left: 0;
width: 100%; /* 圖片寬度為輪播區域寬度 */
}
.carousel:hover img {
transform: translateX(-33.33%); /* 鼠標懸停時移動圖片 */
}  
</style>

這是一個基于CSS的商城圖片輪播。它包括了一個輪播容器div，其中包含三張圖片。CSS樣式的配置使得圖片絕對定位，覆蓋在一起并填滿整個輪播容器。在鼠標懸停時，圖片向左移動，實現了圖片的輪播效果。