本文详细介绍如何使用原生JavaScript实现带有小白点指示器的自动轮播图。通过HTML结构搭建图片列表与导航点，CSS控制布局与样式，JS逻辑处理定时器自动切换及点击交互，完整代码示例涵盖从页面加载到动态样式更新的全过程，适合前端初学者参考学习。
JS原生实现带指示点的自动轮播图
在前文介绍原生JavaScript轮播图的基础上，接下来我们为轮播组件添加跟随图片切换的小圆点指示器。
CSS样式定义
首先定义CSS样式，包括重置默认边距、设置图片容器尺寸与定位、隐藏溢出内容，以及为小圆点列表设置绝对定位、圆形样式和鼠标指针样式。
*{
margin:0px;
padding: 0px;
}
ul{
width: 2500px;
height: 300px;
position: absolute;
}
li{
float: left;
list-style: none;
}
img{
width: 500px;
height: 300px;
}
div{
width: 500px;
height: 300px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
/*小白点的ul*/
#round_ul{
width:300px;
height: 30px;
/*background:yellow;*/
position: relative;
margin: 250px auto;
}
#round_ul li{
width: 20px;
height:20px;
border-radius: 50%;
background: #2196f3;
margin-left: 50px;
cursor: pointer;
}HTML结构搭建
HTML结构包含两个无序列表：第一个列表存放轮播图片，通过绝对定位实现横向排列；第二个列表id为round_ul，用于展示小白点指示器，位于图片容器下方居中显示。
<div>
<ul>
<li><img src="img/31.jpg"></li>
<li><img src="img/32.jpG"></li>
<li><img src="img/33.jpG"></li>
<li><img src="img/34.jpg"></li>
<li><img src="img/31.jpg"></li>
</ul>
<ul id="round_ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>JavaScript交互逻辑
JavaScript部分在页面加载完成后执行。首先获取图片列表和小白点列表的DOM元素，并将第一个小白点背景色设为红色以表示初始状态。接着定义定时器ID和索引变量，创建启动定时器的函数和自动切换逻辑：每隔10毫秒移动图片列表坐标1像素，当图片完全移出视野后重置位置；同时遍历所有小白点将其背景色恢复为蓝色，并将当前对应的小白点设为红色。
<script type="text/javascript">
//页面加载完成后 执行代码
window.onload = function(){
//获取 ul
var imgUl = document.getElementsByTagName("ul")[0];
var groundUl = document.getElementById("round_ul");
//把第一个小白点修改成红色children 节点的子节点(不算空白节点)
groundUl.children[0].style.backgroundColor = "red";
var sId,x = 0;
//开始计时器函数
function fn(){
sId = setInterval(abc,10);
}
function abc(){
//每隔10秒修改ul的坐标,修改1px
imgUl.style.left = x-- +"px";
//如果一张图片完全进入到div中
if(x % 500 == 0){
//调用修改小白点函数
if(x == -2000){
x = 0;
imgUl.style.left = 0 +"px";
}
changLi(Math.abs(x/500));//调用修改小白点方法
clearInterval(sId);//暂定定时器
setTimeout(fn,1000);//隔100毫秒在次启动定时器
}
}
fn();
//修改小白点方法
function changLi(num){
//遍历小白点数组
for(var x = 0;x<4;x++){
//把所有的点修改成蓝色
groundUl.children[x].style.backgroundColor = "#2196f3";
}
//把相对应的小白点修改成红色
groundUl.children[num].style.backgroundColor = "red";
}
}
</script>至此，具备自动播放和小圆点指示功能的原生JavaScript轮播图便实现完毕。
以上关于JS原生带小白点轮播图的实例讲解内容分享完毕，希望能为读者提供有价值的参考，欢迎继续支持本站获取更多技术教程。