如何将轮播（SlideShow）指示器从圆点改为矩形等其他形状

没问题！你完全不用重新做整个轮播，只需要调整CSS里的.dot样式就能轻松把圆点改成矩形、方形或者其他你想要的形状，步骤超简单：

核心修改：调整.dot的CSS属性 #

原来的圆点是靠border-radius: 50%实现圆形的，我们只需要修改这个属性，再调整宽高就能得到不同形状：

1. 改成矩形 #

把border-radius去掉或者设为0，同时可以调整宽度和高度来控制矩形的比例：

/* 矩形指示器 */
.dot {
  cursor: pointer;
  height: 8px; /* 调小高度 */
  width: 25px; /* 拉大宽度 */
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 0; /* 去掉圆角，变成纯矩形 */
  display: inline-block;
  transition: background-color 0.6s ease;
}

2. 改成方形 #

如果想要方形，只需要把宽高设为相同值，同时去掉border-radius：

/* 方形指示器 */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 0; /* 去掉圆角 */
  display: inline-block;
  transition: background-color 0.6s ease;
}

3. 改成胶囊形状（圆角矩形） #

如果想要带圆角的矩形，把border-radius设为一个大于高度一半的值就行：

/* 胶囊形状指示器 */
.dot {
  cursor: pointer;
  height: 12px;
  width: 30px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 6px; /* 等于高度的一半，形成胶囊效果 */
  display: inline-block;
  transition: background-color 0.6s ease;
}

4. 自定义特殊形状（比如三角形） #

如果想要更个性的形状，可以用clip-path属性：

/* 三角形指示器 */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 4px;
  background-color: #bbb;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 下三角形状 */
  display: inline-block;
  transition: background-color 0.6s ease;
}

保留原有交互效果 #

不管改成什么形状，原来的.active和.dot:hover的背景色变化逻辑完全不用改，依然可以正常工作：

.active, .dot:hover {
  background-color: #717171;
}

完整修改示例（以矩形为例） #

把你原来CSS里的.dot相关代码替换成下面的内容就行，HTML和JavaScript完全不用动：

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 8px;
  width: 25px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 0;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

这样修改后，你的轮播指示器就会变成矩形，而且所有原有功能（自动轮播、点击切换、hover效果）都能正常运行~

内容的提问来源于stack exchange，提问作者Kenken