在網頁設計中，圖片左右切換是一個常見的需求。我們可以使用 CSS 來完成這個效果。下面是一段實現圖片左右切換的 CSS 代碼：

/* 將圖片容器設置為相對定位 */
.image-container {
position: relative;
}
/* 給圖片容器中的圖片設置絕對定位 */
.image-container img {
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
}
/* 給圖片容器設置一個寬度，讓圖片水平排列 */
.image-container {
width: 100%;
overflow: hidden;
}
/* 給左右箭頭設置絕對定位 */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #fff;
cursor: pointer;
z-index: 1;
}
/* 左箭頭在左邊，右箭頭在右邊 */
.prev {
left: 0;
}
.next {
right: 0;
}
/* 點擊箭頭時，將圖片容器中的圖片向左或向右移動 */
.prev:hover ~ .image-container img {
transform: translateX(100%);
}
.next:hover ~ .image-container img {
transform: translateX(-100%);
}

上面的代碼使用了 CSS 的過渡（transition）屬性來實現平滑移動的效果。當點擊左箭頭時，圖片容器中的圖片向左移動，當點擊右箭頭時，圖片容器中的圖片向右移動。

我們只需要在 HTML 中加入兩個箭頭元素，一個容器元素，和多個圖片元素即可：

<div class="prev">< </div>
<div class="next">></div>
<div class="image-container">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>

通過使用 CSS，我們就可以實現圖片左右切換的效果了。