<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<style type="text/css">
body,
div,
span {
padding: 0;
margin: 0;
}
#box {
height: 450px;
position: relative;
overflow: hidden;
width: 900px;
border: 2px solid salmon;
}
#list {
width: 4500px;
height: 450px;
position: absolute;
z-index: 1;
}
#list img {
float: left;
width: 900px;
height: 450px;
}
.arrow {
position: absolute;
width: 50px;
height: 50px;
background-color: silver;
cursor: pointer;
font-size: 30px;
text-align: center;
line-height: 50px;
top: 225px;
display: none;
z-index: 2;
color: white;
font-weight: bold;
text-decoration: none;
}
.arrow:hover{
background-color: bisque;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
#box:hover .arrow {
display: block;
}
#buttoms {
position: absolute;
bottom: 20px;
width: 100px;
height: 10px;
z-index: 2;
text-align: center;
left: 450px;
}
#buttoms span{
width: 20px;
margin-right: 10px;
float: left;
border-radius: 50%;
border: 1px solid gainsboro;
cursor: pointer;
background-color: #D3D3D3;
}
#buttoms on{
background-color: sandybrown;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
var list=document.getElementById("list");
var buttoms=document.getElementById("buttoms").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(){
list.style.left=parseInt(list.style.left)-900+"px";
}
prev.onclick=function(){
list.style.left=parseInt(list.style.left)+900+"px";
}
</script>
</head>
<body>
<div id="box">
<div id="list" style="left: -900px;">
<img src="../images/pic11.jpg" alt="3" />
<img src="../images/pic04.jpg" alt="1" />
<img src="../images/pic08.jpg" alt="2" />
<img src="../images/pic11.jpg" alt="3" />
<img src="../images/pic04.jpg" alt="1" />
</div>
<div id="buttoms">
<span index="1" class="on"></span>
<span index="2" ></span>
<span index="3" ></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
var list=document.getElementById("list");
var buttoms=document.getElementById("buttoms").getElementsByTagName("span");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
}（将这个大括号移到</script>前面）
// function animate(offset){
// list.style.left=parseInt(list.style.left)+offset+"px";
// }
next.onclick=function(){
list.style.left=parseInt(list.style.left)-900+"px";
}
prev.onclick=function(){
list.style.left=parseInt(list.style.left)+900+"px";
}
</script>
window.onload=function(){}你应该去了解一下这个知识点