CSS 图片切换样式是网页设计中常用的技巧之一。它能够使网站变得更加生动和有趣。接下来，我们将介绍一些常用的 CSS 图片切换样式。

/* 使用CSS实现图片切换 */
/* 让图片可以切换 */
.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 代码。您可以根据实际情况进行修改和适配。