CSS輪播圖是一種常見的網(wǎng)頁展示方式，它能夠在網(wǎng)頁上展示多張圖片，增加頁面的美觀性和視覺效果。在CSS輪播圖中，點擊圖片時能夠?qū)崿F(xiàn)切換到相應(yīng)的圖片。下面我們來介紹一下如何使用CSS輪播圖實現(xiàn)點擊切換功能。

HTML結(jié)構(gòu)：
<div class="carousel">
<img src="./images/1.jpg" alt="1">
<img src="./images/2.jpg" alt="2">
<img src="./images/3.jpg" alt="3">
<img src="./images/4.jpg" alt="4">
</div>
CSS樣式：
.carousel{
width: 400px;
height: 300px;
position: relative;
}
.carousel img{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity .5s;
}
.carousel img.active{
opacity: 1;
}
JS代碼：
var imgs = document.querySelectorAll('.carousel img');
var currentIndex = 0;
function changeImg(index){
imgs[currentIndex].classList.remove('active');
imgs[index].classList.add('active');
currentIndex = index;
}
imgs.forEach(function(img, index){
img.addEventListener('click', function(){
changeImg(index);
})
});

首先我們在HTML中定義一個輪播圖的容器，里面添加多張圖片，并添加對應(yīng)的alt屬性。在CSS里對輪播圖容器以及圖片進行樣式定義。容器使用相對定位，圖片使用絕對定位，并設(shè)置默認(rèn)opacity為0以及過渡效果。在JS中，使用querySelectorAll選擇所有的輪播圖圖片，定義一個全局變量currentIndex記錄當(dāng)前顯示的圖片索引。定義一個changeImg函數(shù)，參數(shù)為要顯示圖片的索引，利用classList.minus和classList.add方法更改CSS樣式來實現(xiàn)圖片的切換。使用forEach方法遍歷所有圖片，通過addEventListener方法監(jiān)聽圖片的點擊事件，觸發(fā)changeImg函數(shù)來實現(xiàn)圖片的切換。