<!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>
<script type="text/javascript">
window.onload=function(){
var container=document.getElementById("container");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").document.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>
<link href="css/焦点轮播图.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="1"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="5"/>
</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:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
