CSS菜單欄滑動切換圖片是網站設計中常見的特效之一。通過簡單的CSS代碼，我們可以輕松實現這一效果，讓網頁變得更加生動有趣。

代碼示例：

.nav {
display: flex;
justify-content: center;
}
.nav li {
margin-right: 20px;
padding: 10px;
cursor: pointer;
position: relative;
}
.nav li.active::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
background-color: #ff5e3a;
bottom: 0;
left: 0;
}
.nav img {
width: 30px;
height: 30px;
margin-right: 10px;
transition: all 0.3s ease-in-out;
}
.nav li.active img {
transform: scale(1.2);
}

代碼說明：

首先通過flex布局，將菜單項居中顯示；每個菜單項使用li標簽表示，并設置margin-right和padding屬性。同時，設定指針的樣式和相對定位。

當用戶點擊菜單項時，通過CSS添加偽元素::after，創建下劃線效果，使選中的菜單項更加明顯。

菜單項中包含圖片元素，通過設置width、height、margin-right和transition屬性實現縮放和過渡效果。當選中菜單項時，利用CSS的transform屬性，將圖片放大1.2倍。

通過這些簡單的CSS代碼，我們可以輕松地實現菜單欄滑動切換圖片的效果，讓網站變得更加生動有趣。