Javascript jQuery音量控制器点交互功能

如何在音量控制器中实现可点击的指示点，其功能类似于下面的代码。也就是说，当点击相应的点时，它会淡入它绑定到的相应图像？我已经创建了点，它们可以被转换成按钮来点击，但是我如何创建一个函数，这个函数是什么呢

函数cycleemages（）{
var$active=$（'.image.active'）；//获取活动选项卡
var$next=$active.next（）.length>0？$active.next（）：$（'.image:first'）；
//检查下一个长度，如果不存在，只需获取第一个.image div
//淡出顶部图像，并在回调中从中删除活动类
$active.animate({
不透明度：“0”
}，400，函数（）{
$active.removeClass（'active'）
$next.animate({
不透明度：“1”
}，400，函数（）{
$next.addClass（'active'）；
})
});
}
//每5秒运行一次
设置间隔（周期图像，5000）
div.image div.caption{
显示：可见；
位置：绝对位置；
溢出：隐藏；
z指数：20；
颜色：白色；
背景色：rgba（0,0,0,0.35）；
身高：20%；
宽度：100%；
底部：0；
}
.推子{
边界半径：1米；
高度：25vw；
宽度：74vw；
最大高度：100%；
最小高度：10vw；
保证金：0自动；
左边框：1.5em实心#aa917d；
右边框：1.5em实心#aa917d；
位置：相对位置；
溢出：隐藏；
}
.音量控制器分区图像img{
显示：块；
宽度：100%；
保证金：0自动；
z指数：1；
位置：绝对位置；
}
分区图像img{
z指数：5；
}
部门形象{
不透明度：0；
过渡：所有1都容易进入；
}
div.image.active{
不透明度：1；
}
div.image:未（.active）{
显示：无；
}
.圆点{
浮动：对；
背景色：rgba（65,45,30,0.5）；
边界：无；
边界半径：.85vw；
显示：内联块；
高度：.85vw；
宽度：.85vw；
保证金：2em.2em.2em.2em；
}
.dots.active{
背景色：#aa917d；
}
.dot容器{
宽度：20%；
浮动：对；
右边距：.5em
}

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
您需要做几件事才能浏览带点的幻灯片：


循环遍历点元素，对每个点应用一个属性（一个数字，从0或1开始），并对每个点递增一
循环浏览图像，对每个图像应用一个属性（一个数字，从0或1开始），并为每个点递增一。（就像点一样）
将点击事件处理程序添加到点将获得该特定点号的数字属性，并显示具有相同数字属性的图像
删除每张幻灯片上的点的标记，取而代之的是所有幻灯片上只有一组点（这需要调整HTML/CSS）

我建议查看现有的具有此功能的转盘，以便更好地理解代码。看看这个“它有你想要的功能。
你需要做几件事才能浏览带点的幻灯片：


循环遍历点元素，对每个点应用一个属性（一个数字，从0或1开始），并对每个点递增一
循环浏览图像，对每个图像应用一个属性（一个数字，从0或1开始），并为每个点增加一个属性（就像点一样）
将点击事件处理程序添加到点将获得该特定点号的数字属性，并显示具有相同数字属性的图像
删除每张幻灯片上的点的标记，取而代之的是所有幻灯片上只有一组点（这需要调整HTML/CSS）

我建议查看一个现有的具有此功能的转盘，以便更好地理解代码