如何创建用于在页面/幻灯片之间切换的项目符号

Question

我有一个在div之间切换的页面，功能正在运行，但是现在，我只有这个：

我希望黑/白容器成为没有文字的子弹。像这样：

＆＃13;

＆＃13;

#menu li {
	display:block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:18%;
	right:1%;
	height: 40px;
	z-index: 70;
	width: 10%;
	padding: 0;
	margin:0;
}

＆＃13;

<ul id="menu">
	<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
	<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
	<li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用设置为50％的多个box-shadow和border-radius来执行此操作。

此外，您可以使用另一个活动类为所选项目符号提供不同的外观。在这种情况下，我使用opacity来区分活动和非活动项目符号：

.dots {
  display: inline-block;
  width: 50px;
  margin: 1em;
  height: 50px;
  opacity: 0.5;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 3px green,
              0px 0px 0px 5px #fff;
  -webkit-box-shadow: 0px 0px 0px 3px green,
              0px 0px 0px 5px #fff;
}

html {
  width: 100%;
  height: 100%;
  background-color: green;
}

.dots + .dots-active {
  opacity: 1.0
}

<div class="dots">
</div>

<div class="dots dots-active">
</div>