在網頁中，我們常常會需要使用圖片輪播來展示圖片。其中，CSS圖片輪播加圓點是一種常見的實現方式，它能夠使網頁看起來更加美觀、實用。下面，讓我們來了解一下如何實現這種效果。

<style>
/* 設置圖片的樣式 */
.slide {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slide img {
position: absolute;
width: 100%;
height: 400px;
opacity: 0;
transition: opacity 1s ease;
}
.slide img.active {
opacity: 1;
}
/* 設置圓點的樣式 */
.dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
margin: 0 10px;
cursor: pointer;
}
.dot.active {
background-color: red;
}
</style>
<div class="slide">
<img src="img1.jpg" alt="" class="active">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<div class="dots">
<div class="dot active" onclick="changeSlide(1)"></div>
<div class="dot" onclick="changeSlide(2)"></div>
<div class="dot" onclick="changeSlide(3)"></div>
</div>
</div>
<script>
let currentSlide = 1;
const slides = document.querySelectorAll('.slide img');
const dots = document.querySelectorAll('.dot');
function changeSlide(n) {
if (n >slides.length) {
n = 1;
}
if (n< 1) {
n = slides.length;
}
for (let i = 0; i< slides.length; i++) {
slides[i].classList.remove('active');
}
for (let i = 0; i< dots.length; i++) {
dots[i].classList.remove('active');
}
slides[n - 1].classList.add('active');
dots[n - 1].classList.add('active');
currentSlide = n;
}
setInterval(() =>{
changeSlide(currentSlide + 1);
}, 5000)
</script>

代碼中，我們首先定義了一些樣式。其中，.slide設置了輪播圖的寬度、高度以及圖片的定位方式；.slide img用來設置圖片的透明度，以及圖片之間的動畫效果；.dots是用來設置圓點的樣式，它包括了一些布局和樣式屬性。

接下來，我們使用div class="slide"，來包裹圖片和圓點。圖片使用標簽，并設置了圖片的class為active，這樣在頁面加載時就會自動顯示第一張圖片，同時設置了圓點的點擊事件，實現了點擊圓點切換至對應的輪播圖。

最后，我們通過JavaScript代碼來實現圖片輪播的自動播放功能。首先，定義了一個變量currentSlide來記錄當前顯示的圖片編號，然后使用querySelectorAll函數選中DOM元素，并使用classList.add/innerHTML/...等方法改變它們的樣式或內容，從而實現圖片的切換和自動播放。