CSS是構建網頁的重要組成部分，其中商城圖片輪播圖是一個極具實用性和美觀性的效果。輪播圖不僅可以提高網頁的用戶體驗，而且也可以有效的展示商品信息。

.slider {
position: relative;
height: 400px;
overflow: hidden;
}
.slider-image {
position: absolute;
height: 400px;
width: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: opacity 0.5s ease-in-out;
}
.slider-image.active {
opacity: 1;
z-index: 1;
}
.slider-nav {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.slider-nav button {
height: 15px;
width: 15px;
border-radius: 50%;
background-color: white;
border: none;
margin-right: 10px;
cursor: pointer;
}
.slider-nav button.active {
background-color: black;
}

上述代碼是一個簡單的圖片輪播圖的實現。HTML代碼類似于這樣：

輪播圖共有三張圖片和三個導航點，其中每張圖片通過CSS設置了絕對定位顯示在輪播圖中，并通過opacity來控制顯示和隱藏，同時增加了過渡效果，讓輪播圖變化更加的平滑。通過JavaScript監聽導航點的點擊事件，然后根據點擊位置切換圖片，并將當前圖片設置為active，同時更新對應的導航點樣式。

以上，一個簡單的商城圖片輪播圖就完成了。通過CSS技術運用，相信在實現商城頁面中，圖片展示一定會更加的美觀和實用。