Javascript 无法在imageslider中的点上设置圆边框

我使用了codepen的幻灯片放映，但我无法更改这些点来更改幻灯片。我想在圆点周围加上黑色边框。当我尝试它时，它是矩形的。为了节省你的时间，这节课上有点a。 我知道的很少，但我不知道是什么

$'.slider'.eachfunction{ var$this=$this； var$group=$this.find'.slide_group'； var$slides=$this.find'.slide'； 变量数组=[]； var currentIndex=0； var超时； 函数movenewIndex{ 变量animateLeft，slideLeft； 进展 如果$group.is'：动画“| | currentIndex===newIndex{ 回来 } bulletArray[currentIndex].removeClass'active'； bulletArray[newIndex].addClass'active'； 如果newIndex>currentIndex{ slideLeft='100%'； animateLeft='-100%'； }否则{ slideLeft='-100%'； animateLeft='100%'； } $slides.eqnewIndex.css{ 显示：“块”， 左：slideLeft }; $group.animate{ 左：animateLeft }，功能{ $slides.eqcurrentIndex.css{ 显示：“无” }; $slides.eqnewIndex.css{ 左：0 }; $group.css{ 左：0 }; currentIndex=newIndex； }; } 功能推进{ clearTimeouttimeout； 超时=setTimeoutfunction{ 如果当前索引<$slides.length-1{ movecurrentIndex+1； }否则{ move0； } }, 4000; } $'。下一步_btn'。单击，函数{ 如果当前索引<$slides.length-1{ movecurrentIndex+1； }否则{ move0； } }; $'。上一个\u btn'。单击，函数{ 如果currentIndex！==0{ 流动指数-1； }否则{ 移动3； } }; $。每个$幻灯片，功能索引{ 变量$button=$'&bull；'； 如果索引===currentIndex{ $button.addClass'active'； } $button。单击，功能{ 移动指数； }.appendTo'.slide_按钮'； bulletArray。按$按钮； }; 进展 }; html，正文{ 背景：F7F5E6； 身高：100%； 保证金：0； 填充：0； 宽度：100%； } .滑块{ 保证金：0自动； 宽度：100%； 身高：100%； } .幻灯片查看器{ 身高：100%； 高度：340px； 溢出：隐藏； 位置：相对位置； } .幻灯片组{ 身高：100%； 位置：相对位置； 宽度：100%； } .幻灯片{ 显示：无； 身高：100%； 位置：绝对位置； 宽度：100%； } 幻灯片：第一个孩子{ 身高：100%； 显示：块； } .幻灯片：第n张类型1{ 身高：100%； 背景：D7A151； } .幻灯片：第n张，共2张{ 身高：100%； 背景：F4CD； } .幻灯片：第n张，共3张{ 背景：C75534； } .幻灯片：第n张，共4张{ 身高：100%； 背景：D1D4； } .滑动按钮{ 左：0； 位置：绝对位置； 右：0； 文本对齐：居中； } a、 幻灯片{ 颜色：474544； 字体大小：42px； 边缘：0.175em； -webkit过渡：所有0.4s易入易出； -moz转换：所有0.4易入易出； -ms转换：所有0.4s易进易出； -o型过渡：所有0.4s易于输入输出； 过渡：所有0.4缓进缓出； } .slide\u btn.活动，.slide\u btn:悬停{ 颜色：428CC6； 光标：指针； } .定向导航{ 高度：340px； 保证金：0自动； 最大宽度：940px； 位置：相对位置； 顶部：-340px； } .以前的{ 底部：0； 左：100px； 保证金：自动； 位置：绝对位置； 排名：0； } .下一个{ 底部：0； 保证金：自动； 位置：绝对位置； 右：100px； 排名：0； } .上一个\u btn、.下一个\u btn{ 光标：指针； 高度：65px； 不透明度：0.5； -webkit过渡：不透明度0.4s易入易出； -moz过渡：不透明度0.4s缓进缓出； -ms转换：不透明度0.4s缓进缓出； -o型过渡：不透明度0.4s缓进缓出； 过渡：不透明度0.4s缓进缓出； 宽度：65px； } .上一个\u btn:悬停，.下一个\u btn:悬停{ 不透明度：1； } @仅介质屏幕和最大宽度：767px{ .以前的{ 左：50px； } .下一个{ 右：50px； } }

---

实际上，这里使用的圆圈是一些类似于字母的符号。当你给a.slide_btn加边框时，它基本上只给了一个字母符号的容器加边框。实际上有两种方法，第一种方法是以svg格式绘制自定义圆，就像滑块中使用的“下一个”和“上一个”按钮一样。但是如果你想要一些简单的东西，你可以给一个包含圆圈的.slide\u btn添加文本阴影

a、 幻灯片{ 颜色：428CC6； 字体大小：200px； 文本阴影：-2px0黑色，02px黑色，2px0黑色，0-2px黑色； } •