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

不知道為什么出現(xiàn)不了箭頭的切換。很頭疼啊

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>lunbo</title>
<style type="text/css">
? ?*{margin:0;padding:0;text-decoration: none;}

? ?#container{width:600px;height:400px;position:relative;border:1px solid red;overflow: hidden;}
? ?.list{position:absolute;z-index:1;width:3000px;height:400px;}
? ?.list img{float:left;width:600px;height:400px;}
? ?.buttons{position:absolute;width:80px;height:8px;bottom:20px;left:250px;z-index:2;}
? ?.buttons span{float:left;border:1px solid #fff;width:10px;height:8px;border-radius:50%;background:#333;margin-left:4px;}
? ?.buttons .on{background: orangered;}
? ?.arrow{position:absolute;color:#fff;
? ? ? ?border:1px solid red;
? ? ? ?width:40px;height:40px;
? ? ? ?font-size:39px;line-height:40px;
? ? ? ?font-weight:bold;
? ? ? ?text-align:center;display:none;
? ? ? ?background-color: RGBA(0,0,0,.3);
? ? ? ?z-index:2;
? ?top:180px;}
? ?.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 class="list" style="left:-600px;">
? ?<img src="images/27.jpg" alt=""/>
? ?<img src="images/33.jpg" alt=""/>
? ?<img src="images/32.jpg" alt=""/>
? ?<img src="images/28.jpg" alt=""/>
? ?<img src="images/29.jpg" alt=""/>
? ?</div>
? ?<div class="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"><</a>
? ?<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>