样式浏览器显示的箭头不对，2个都是向左边，没有那里出问题了，火狐浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
padding: 20px;
}
#container{
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list{
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
}
#list img{
float: left;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
#buttons span{
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#buttons .on{
background: orangered;
}
.arrow{
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover{
background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow{
display: block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img2/5.jpg" alt=""/>
<img src="img2/1.jpg" alt=""/>
<img src="img2/2.jpg" alt=""/>
<img src="img2/3.jpg" alt=""/>
<img src="img2/4.jpg" alt=""/>
<img src="img2/5.jpg" alt=""/>
<img src="img2/1.jpg" alt=""/>
</div>
<div id="buttons">
<span index="1"></span>
<span index="2" ></span>
<span index="3" ></span>
<span index="4" ></span>
<span index="5" ></span>
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next"><</a>
</div>
</body>
</html>
