CSS 圖片切換樣式是網頁設計中常用的技巧之一。它能夠使網站變得更加生動和有趣。接下來，我們將介紹一些常用的 CSS 圖片切換樣式。

/* 使用CSS實現(xiàn)圖片切換 */
/* 讓圖片可以切換 */
.switchable img {
display: none; /* 先隱藏所有的圖片 */
}
.switchable img:first-of-type {
display: block; /* 顯示第一張圖片 */
}
/* 設計切換按鈕 */
.switch-btn {
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
}
/* 當切換按鈕被激活時 */
.switch-btn.active {
background-color: #000;
}
/* JS代碼控制切換 */
$('.switchable').on('click', '.switch-btn', function() {
// $(this)是被點擊的按鈕
$(this).addClass('active').siblings().removeClass('active'); // 按鈕樣式切換
var idx = $(this).index(); // 獲取按鈕在父元素中的位置
$('.switchable img').eq(idx).fadeIn().siblings('img').fadeOut(); // 切換圖片
});

以上代碼使用的是 jQuery 庫，因此需要先加載。這是一個例子，其中包含基本的 CSS 和 JS 代碼。您可以根據(jù)實際情況進行修改和適配。