* {margin: 0; padding: 0;list-style: none;text-decoration: none;}
#box {width: 600px;height: 400px;border: 1px solid aliceblue;overflow: hidden;position: relative;margin: 20px auto;}
#box img {width: 600px;height: 400px;}
.arrow {display: none; width: 30px; height: 30px; line-height: 30px; font-size: 20px;
text-align: center;background: rgba(0,0,0, .3);color: #fff;z-index: 3;position: absolute;margin-top: 185px;}
#box:hover .arrow {display: block;}
.arrow:hover {background: rgba(0,0,0, .7);}
#prev {left: 20px;}
#next {right: 20px;}
.button .on {background: orangered;}
.button {width: 100px;height: 10px;position: absolute;left: 250px;bottom: 10px;z-index: 2;}
.button span:nth-child(1) {margin-left: 0;}
.button span {display: block;float: left;width: 10px;height: 10px;border-radius: 50%;border: 1px solid #fff;margin-left: 8px;}
<script type="text/javascript">
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg" alt="1"></li>
<li><img src="img/2.jpg" alt="2"></li>
<li><img src="img/3.jpg" alt="3"></li>
<li><img src="img/4.jpg" alt="4"></li>
<li><img src="img/5.jpg" alt="5"></li>
</ul>
<div class="button">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" class="arrow" id="prev" ><</a>
<a href="javascript:;" class="arrow" id="next" >></a>
</div>
为什么这样写控制前后轮播的按钮无法正常显示？
