                        课程
                    
                        /前端开发
                        
                            /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>