* {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>
为什么这样写控制前后轮播的按钮无法正常显示？
<a href="javascript:;" class="arrow" id="prev" ><</a>
<a href="javascript:;" class="arrow" id="next" >></a>
<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>
这样写便可以正常显示，但是并不知道为什么