为什么切换不了图片呢?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
text-decoration: none;
}
body{
padding: 20px;
}
#cntainer{
height: 400px;
width: 600px;
border: 3px solid#333;
overflow: hidden;
position: relative;
}
#list{
height: 400px;
width: 4200px;
z-index: 1;
position: absolute;
background-color: #0C9;
}
#list img{
float: left;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
bottom: 20px;
left: 250px;
background-color: #999;
z-index: 2;
}
#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: block;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background: 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}
<script type="text/javascript">
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span')
var prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate (offset){
list.style.left=parseint(list.style.left)+offset+'px';}
next.onclick=function(){
animate (-600);
}
prev.onclick=function(){
animate (600);
}
}
</script>
</style>
</head>
<body>
<div id="cntainer">
<div id="list" style="left:-600">
<img src="图片/山下/山下-5.jpg" alt="1">
<img src="图片/山下/山下-1.jpg" alt="1">
<img src="图片/山下/山下-2.jpg" alt="2">
<img src="图片/山下/山下-3.jpg" alt="3">
<img src="图片/山下/山下-4.jpg" alt="4">
<img src="图片/山下/山下-5.jpg" alt="5">
<img src="图片/山下/山下-1.jpg" alt="5">
<div id="buttons">
<span index="1" class="on"></span>
<span index="2" ></span>
<span index="3" ></span>
<span index="4" ></span>
<span index="5" ></span>
</div>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>