var banner_pic = document.getElementById("banner_pic"); var dots1 = document.getElementById("dots1"); var dots2 = document.getElementById("dots2"); var dots3 = document.getElementById("dots3"); var dots4 = document.getElementById("dots4"); var dots5 = document.getElementById("dots5"); //dots1点击事件 function dots1Click(){ dots1.style.backgroundColor = "rgba(255,255,255,1)"; dots2.style.backgroundColor = "rgba(112,128,144,0.5)"; banner_pic.src = "image/banner/banner1.jpg"; } //dots2点击事件 function dots2Click(){ dots2.style.backgroundColor = "rgba(255,165,0,1)"; dots1.style.backgroundColor = "rgba(112,128,144,0.5)"; banner_pic.src = "image/banner/banner2.jpg"; } function dots3Click(){ dots2.style.backgroundColor = "rgba(255,165,0,1)"; dots1.style.backgroundColor = "rgba(112,128,144,0.5)"; banner_pic.src = "image/banner/banner3.jpg"; } function dots4Click(){ dots2.style.backgroundColor = "rgba(255,165,0,1)"; dots1.style.backgroundColor = "rgba(112,128,144,0.5)"; banner_pic.src = "image/banner/banner4.jpg"; } function dots5Click(){ dots2.style.backgroundColor = "rgba(255,165,0,1)"; dots1.style.backgroundColor = "rgba(112,128,144,0.5)"; banner_pic.src = "image/banner/banner5.jpg"; }

这段代码是为一个轮播图添加了五个小圆点的点击事件。当用户点击某个小圆点时，会触发对应的 `dotsXClick` 函数，其中 `X` 表示第几个小圆点。这些函数的具体操作如下：

- `dots1Click`: 将第一个小圆点的背景色设置为白色，其他小圆点的背景色设置为半透明的灰色；将轮播图的图片地址设置为 "image/banner/banner1.jpg"。
- `dots2Click`: 将第二个小圆点的背景色设置为橙色，其他小圆点的背景色设置为半透明的灰色；将轮播图的图片地址设置为 "image/banner/banner2.jpg"。
- `dots3Click`: 将第三个小圆点的背景色设置为橙色，其他小圆点的背景色设置为半透明的灰色；将轮播图的图片地址设置为 "image/banner/banner3.jpg"。
- `dots4Click`: 将第四个小圆点的背景色设置为橙色，其他小圆点的背景色设置为半透明的灰色；将轮播图的图片地址设置为 "image/banner/banner4.jpg"。
- `dots5Click`: 将第五个小圆点的背景色设置为橙色，其他小圆点的背景色设置为半透明的灰色；将轮播图的图片地址设置为 "image/banner/banner5.jpg"。

这样，当用户点击某个小圆点时，就可以切换轮播图的图片，并且对应的小圆点会变成橙色，其他小圆点会变成灰色。