Javascript CSS jQuery-在我的滑块中使用项目符号作为指示器

我用jQuery构建了一个滑块。但是仍然缺少一件事，我需要指示器，以便用户可以在图像之间切换。这应该可以通过

.bullet points

和

.thumbnails img

我真的没有找到一种使用特殊标记的方法，我怎么能做到呢

这是密码

$（文档）.ready（函数（）{
var images=[$（“.image holder img:first child”），$（“.image holder img:nth of type（2）”，$（“.image holder img:nth of type（3）”，$（“.image holder img:nth of type（3）”），$（“.image holder img:last child”）；
var thumbnails=[$（“.thumbnails img:第一个孩子”），$（“.thumbnails img:第n个类型（2）”，$（“.thumbnails img:第n个类型（3）”，$（“.thumbnails img:最后一个孩子”）；
var text=[$（“.text holder.text:first child”），$（“.text holder.text:nth类型（2）”，$（“.text holder.text:nth类型（3）”，$（“.text holder.text:nth类型（3）”），$（“.text holder.text:last child”）；
变量背景=[“蓝色”、“黄色”、“绿色”、“灰色”]；
i=1；
var时间=3000；
setInterval（函数（）{
如果（i！=0）{
图像[i-1]。removeClass（“活动”）；
文本[i-1]。removeClass（“活动”）；
缩略图[i-1].removeClass（“活动缩略图”）；
}
if（i==images.length）{
i=0
}
图像[i].addClass（“活动”）；
text[i].addClass（“活动”）；
缩略图[i].addClass（“活动缩略图”）；
$（“.slider”）.css（“背景色”，背景[i]）；
i++；
}，时间）；
});
.text holder p{
保证金：0；
}
.滑块{
填充：20px；
利润率：50像素；
/*背景图像：url（'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ'）*/
背景颜色：蓝色；
背景重复：无重复；
背景大小：100%100%；
}
.缩略图{
身高：100%；
}
.缩略图{
最大宽度：50px；
显示：块；
边缘底部：10px；
}
.文本保持器.文本{
显示：无；
}
/*显示活动图像*/
.主动{
显示：块！重要；
}
/*当图像处于活动状态时隐藏缩略图*/
.活动缩略图{
显示：无！重要；
}
.要点{
显示：块；
文本对齐：居中；
}
.要点a{
字体大小：30px；
文字装饰：无；
颜色：继承；
}
/*.图像支架{
最大宽度：350px！重要；
}
.图像支架{
最大宽度：350px！重要；
}*/

同侧眼睑

巨型品目1
更多的文字

同侧眼睑

巨型品目2
更多的文字

同侧眼睑

巨型品目3
更多的文字

同侧眼睑

巨型品目4
更多的文字

您可以尝试这样的方法

创建一个滑块函数，而不是像在当前代码中那样作为匿名函数使用

将点击事件绑定到
.thumbnails img
和
.bullet points a
，您可以控制该事件中的逻辑

创建一个变量来控制当前幻灯片，这样当用户从一张幻灯片跳到另一张幻灯片时，幻灯片可以正确显示


$（文档）.ready（函数（）{
var images=[$（“.image holder img:first child”），$（“.image holder img:nth of type（2）”，$（“.image holder img:nth of type（3）”，$（“.image holder img:nth of type（3）”），$（“.image holder img:last child”）；
var thumbnails=[$（“.thumbnails img:第一个孩子”），$（“.thumbnails img:第n个类型（2）”，$（“.thumbnails img:第n个类型（3）”，$（“.thumbnails img:最后一个孩子”）；
var text=[$（“.text holder.text:first child”），$（“.text holder.text:nth类型（2）”，$（“.text holder.text:nth类型（3）”，$（“.text holder.text:nth类型（3）”），$（“.text holder.text:last child”）；
变量背景=[“蓝色”、“黄色”、“绿色”、“灰色”]；
var i=0；
var currentSlide=0；
var时间=3000；
var sliderTimer=setInterval（滑块，时间）；
//滑块导航
$（'.项目符号a，.缩略图img'）。单击（函数（e）{
e、 预防默认值（）；
var pos=$（this.index（）；
clearInterval（sliderTimer）；//停止自动幻灯片放映
sliderTimer=false；
滑块（pos）；
});
功能滑块（pos）{
电流滑动=i；
如果（位置类型）！=‘未定义’）{
i=位置；
图像[currentSlide-1].removeClass（“活动”）；
文本[currentSlide-1]。removeClass（“活动”）；
缩略图[currentSlide-1].removeClass（“活动缩略图”）；
}
如果（i！=0）{
图像[i-1]。removeClass（“活动”）；
文本[i-1]。removeClass（“活动”）；
缩略图[i-1].removeClass（“活动缩略图”）；
}
如果（i==images.length）{i=0}
图像[i].addClass（“活动”）；
text[i].addClass（“活动”）；
缩略图[i].addClass（“活动缩略图”）；
$（“.slider”）.css（“背景色”，背景[i]）；
i++；
如果（！sliderTimer）{
sliderTimer=setInterval（滑块，时间）；//开始自动幻灯片放映
}
}
});
.text holder p{margin:0；}
.滑块{
填充：20px；
利润率：50像素；
/*背景图像：url（'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ'）*/
背景颜色：蓝色；
背景重复：无重复；
背景大小：100%100%；
}
.缩略图{
身高：100%；
}
.缩略图{
最大宽度：50px；
显示：块；
边缘底部：10px；
}
.文本保持器.文本{
显示：无；
}
/*显示活动图像*/
.主动{
显示：块！重要；
}
/*当图像处于活动状态时隐藏缩略图*/
.活动缩略图{
显示：无！重要；
}
.要点{
显示：块；
文本对齐：居中；
}
.要点a{
字体大小：30px；
文字装饰：无；
颜色：继承；
}
/*.图像支架{