CSS輪播圖小圓點的制作是一個常見的需求，通常用于展示圖片或內容輪播的效果，下面是一些關于如何制作CSS輪播圖小圓點的指導：

1、準備HTML結構：你需要有一個包含圖片的HTML結構，可以使用div元素來包裹圖片，并給每個圖片一個***的ID或類名。

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

2、添加CSS樣式：你需要添加一些CSS樣式來制作輪播圖和小圓點，可以使用position屬性來定位圖片和小圓點的位置。

.slider {
  position: relative;
  width: 300px;
  height: 200px;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3、制作小圓點：你可以使用HTML和CSS來制作小圓點，可以使用ul和li元素來創(chuàng)建列表，并使用CSS來樣式化列表項。

<ul class="bullets">
  <li></li>
  <li></li>
  <li></li>
</ul>

.bullets {
  position: absolute;
  bottom: 10px;
  left: 50%;
}
.bullets li {
  list-style-type: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 5px;
}

4、添加JavaScript：你需要添加一些JavaScript代碼來實現(xiàn)輪播圖的功能，可以使用setInterval函數(shù)來定期更換圖片。

var slider = document.querySelector('.slider');
var images = document.querySelectorAll('.slider img');
var bullets = document.querySelector('.bullets');
var bulletCount = images.length;
var currentImageIndex = 0;
var imageInterval = null;
var bulletIndex = 0;
var bulletCount = images.length; // 確保子彈數(shù)量與圖片數(shù)量一致
var currentBulletIndex = 0; // 當前選中的子彈索引
var bulletInterval = null; // 定時更新子彈狀態(tài)的定時器
var bulletElement = document.createElement('li'); // 創(chuàng)建新的子彈元素用于替換舊的子彈元素bulletElement.style.backgroundColor = images[currentImageIndex].style.backgroundColor; // 設置新子彈的背景顏色為當前圖片的顏色bulletElement.style.borderRadius = '50%'; // 設置新子彈的邊框半徑為50%bulletElement.style.width = '10px'; // 設置新子彈的寬度為10pxbulletElement.style.height = '10px'; // 設置新子彈的高度為10pxbulletElement.style.marginRight = '5px'; // 設置新子彈的右邊距為5pxbulletElement.style.display = 'inline-block'; // 設置新子彈的顯示類型為行內塊級元素// 將新子彈添加到子彈列表中bullets.appendChild(bulletElement); // 更新當前選中的子彈索引currentBulletIndex = (currentBulletIndex + 1) % bulletCount; // 計算下一個要選中的子彈索引// 更新定時器以定期更換圖片和子彈狀態(tài)imageInterval = setInterval(function() { // 更換圖片images[currentImageIndex].style.display = 'none'; // 隱藏當前圖片currentImageIndex = (currentImageIndex + 1) % images.length; // 計算下一個要顯示的圖片索引images[currentImageIndex].style.display = 'block'; // 顯示下一張圖片// 更換子彈bullets.removeChild(bullets.children[currentBulletIndex]); // 刪除舊的子彈元素bulletElement = document.createElement('li'); // 創(chuàng)建新的子彈元素bulletElement.style.backgroundColor = images[currentImageIndex].style.backgroundColor; // 設置新子彈的背景顏色為當前圖片的顏色bulletElement.style.borderRadius = '50%'; // 設置新子彈的邊框半徑為50%bulletElement.style.width = '10px'; // 設置新子彈的寬度為10pxbulletElement.style.height = '10px'; // 設置新子彈的高度為10pxbulletElement.style.marginRight = '5px'; // 設置