                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點圖輪播特效

和老師跟著寫的，運行不了

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>輪播圖</title>
????<style?type="text/css">
?*{padding:0;margin: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;
?width:100px;
?height:10px;
?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;
?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>
????<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>
</head>
<body>
??<div?id="container">
??????<div?id="List"?style="left:-600px;">
??????????<img?src="images/5.jpg"?alt=""/>
??????????<img?src="images/1.jpg"?alt=""/>
??????????<img?src="images/2.jpg"?alt=""/>
??????????<img?src="images/3.jpg"?alt=""/>
??????????<img?src="images/4.jpg"?alt=""/>
??????????<img?src="images/5.jpg"?alt=""/>
??????????<img?src="images/1.jpg"?alt=""/>
??????</div>
??????<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>
??????<a?href="javascript:"?class="arrow"?id="prev">&lt;</a>
??????<a?href="javascript:"?class="arrow"?id="next">&gt;</a>
??</div>
</body>
</html>