添加了动画函数后反而图片无法切换了
<!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>
<style>
*{ text-decoration:none;}
#conter{width:600px; height:400px; border:3px solid #930; position:relative; overflow:hidden;}
#list{width:4200px; height:400px; position:absolute; z-index:1;}
#list img{ float:left;}
.arrow{position:absolute; z-index:2;width:40px; height:40px; background-color:rgba(0,0,0,.3); font-size:36px; font-weight:bold; color: #FFF; top:180px; display:none; line-height:39px; text-align:center;}
#conter:hover .arrow{display:block;}
.arrow:hover{ background-color:rgba(0,0,0,.7);}
#buttons{position:absolute; z-index:2; width:100px; height:10px; bottom:20px; left:250px;}
#buttons span{ cursor:pointer; width:10px; height:10px; background-color:#999; border:1px solid #FFF; border-radius:50%; float:left; margin-left:5px; }
#buttons .on{ background:#F00;}
#prev{left:20px;}
#next{right:20px;}
</style>
<script type="text/javascript">
window.onload=function(){
rec();
}
function rec(){
var conter=document.getElementById("conter");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var index=1;
function showbutton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
}
}
buttons[index-1].className='on';
}
function a(offset){
var newleft=parseInt(list.style.left)-offset;
var time=300;
var intervar=10;
var speed=offset/(time/interval);
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}else{
list.style.left=newleft+'px';
if(newleft>-600)
{
list.style.left=-3000+'px';
}
if(newleft<-3000)
{
list.style.left=-600+'px';
}
}
}
go();
}
next.onclick=function (){
if(index==5){
index=1;
}else{
index+=1;
}
showbutton();
a(-600);
}
prev.onclick=function(){
if(index==1){
index=5;
}else{
index-=1;
}
showbutton();
a(600);
}
for(var i=0; i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=='on'){
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=-600*(myIndex-index);
a(offset);
index=myIndex;
showbutton();
}
}
}
</script>
</head>
<body>
<div id="conter">
<div id="list" style="left:-600px;"/>
<img src="../images/5.jpg"/>
<img src="../images/1.jpg"/>
<img src="../images/2.jpg"/>
<img src="../images/3.jpg"/>
<img src="../images/4.jpg"/>
<img src="../images/5.jpg"/>
<img src="../images/1.jpg"/>
</div>
<div id="buttons">
<span class="on" index='1'></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>
