CSS可以很方便地實(shí)現(xiàn)圖片的切換效果。通過設(shè)置不同的背景圖片，然后通過JS或者CSS控制背景圖片的顯示和隱藏，就可以實(shí)現(xiàn)圖片的切換。以下是利用CSS實(shí)現(xiàn)圖片切換的一個(gè)樣例。

HTML代碼：
<div class="image-slider">
<div class="image-slider-container">
<div class="image active" style="background-image: url('image1.jpg')"></div>
<div class="image" style="background-image: url('image2.jpg')"></div>
<div class="image" style="background-image: url('image3.jpg')"></div>
</div>
</div>
CSS代碼：
.image-slider {
width: 800px;
height: 400px;
overflow: hidden;
position: relative;
}
.image-slider-container {
width: 2400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease-in-out;
}
.image {
width: 800px;
height: 400px;
float: left;
background-size: cover;
background-position: center center;
}
.active {
transform: translateX(-800px);
}

我們首先創(chuàng)建一個(gè)div，設(shè)置它的寬度和高度。然后在這個(gè)div里面創(chuàng)建一個(gè)class名為“image-slider-container”的div，用來容納所有的圖片。在這個(gè)div里面創(chuàng)建三個(gè)class名為“image”的div，用來顯示不同的圖片，每一個(gè)div的背景圖片都不同。在CSS中我們?cè)O(shè)置了容器的寬度為所有圖片的寬度之和，這樣才能呈現(xiàn)出所有的圖片。

默認(rèn)情況下，只有第一張圖片會(huì)顯示出來。因?yàn)楹竺鎯蓮垐D片是被放在容器的外部的。我們通過設(shè)置一個(gè)class名為“active”的樣式，來為當(dāng)前顯示的圖片添加樣式。在這個(gè)樣式中，我們使用了transform屬性，將容器向左移動(dòng)了一個(gè)圖片的寬度，這樣后面的圖片就會(huì)變成當(dāng)前顯示的圖片了。然后我們還設(shè)置了一個(gè)過渡效果，讓圖片的切換不會(huì)顯得太生硬。