在網(wǎng)頁設(shè)計中，常常需要使用圖片輪播來為網(wǎng)站增添美感和活力。然而，在實現(xiàn)圖片輪播功能時，我們往往需要添加導(dǎo)航圓點來實現(xiàn)用戶點擊圖片來進(jìn)行切換。在本文中，我們將介紹如何使用CSS實現(xiàn)點擊圓點可變化的效果。

HTML結(jié)構(gòu)：
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<div class="dot-wrap">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
CSS樣式：
.slider {
position: relative;
}
.dot-wrap {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot {
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #d8d8d8;
cursor: pointer;
}
.active {
background-color: #333;
}
JavaScript代碼：
const dots = document.querySelectorAll('.dot');
const imgs = document.querySelectorAll('.slider img');
dots.forEach((dot, index) =>{
dot.addEventListener('click', () =>{
imgs.forEach((img) =>img.classList.remove('active'));
imgs[index].classList.add('active');
dots.forEach((dot) =>dot.classList.remove('active'));
dot.classList.add('active');
});
});

通過上述的HTML、CSS和JavaScript代碼，我們就實現(xiàn)了圖片輪播中點擊圓點可變化的效果。其中，通過設(shè)置.dot-wrap的position屬性為absolute，我們將圓點布局在了圖片的最下方，通過設(shè)置transform: translateX(-50%)實現(xiàn)圓點居中。通過使用flex布局，我們可以讓圓點的位置靈活調(diào)整。通過JavaScript代碼，在點擊圓點時，我們將當(dāng)前顯示的圖片和圓點添加.active的class，使其變?yōu)榭梢暬癄顟B(tài)。

以上就是如何使用CSS實現(xiàn)點擊圓點可變化效果的方法，希望對廣大網(wǎng)頁設(shè)計師有所幫助。