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

添加了動(dòng)畫函數(shù)后反而圖片無法切換了

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
*{
margin:?0;
padding:?0;
}
a{
text-decoration:?none;
}
li,ul{
list-style:?none;
}
#container{
margin:?20px;
width:?440px;
height:?220px;
border-bottom:?20px?solid?#000;
background:?#000;
position:?relative;
overflow:?hidden;

}
#list{
width:?3080px;
height:?220px;
z-index:?1;
position:?absolute;
}
#list?img{
float:?left;
}
.arrow{
width:?40px;
height:?40px;
line-height:?40px;
color:?#fff;
z-index:?2;
position:?absolute;
top:?90px;
background:?RGBA(0,0,0,.3);
text-align:?center;
font-size:?20px;
font-weight:?bold;
display:?none;
}
#container:hover?.arrow{
display:?block;
}
.arrow:hover{
background-color:?RGBA(0,0,0,.7);
}
#buttons{
width:?120px;
height:?15px;
position:?absolute;
bottom:?10px;
left:?170px;
z-index:?2;?
}
#buttons?li{
height:?15px;
width:?15px;
background:?#eee;
border:1px?solid?#999;
border-radius:?50%;
float:?left;
margin-left:?5px;
cursor:?pointer;
}
#buttons?.on{
background:?#DE752D;
}
#next{
right:?20px;
}
#prev{
left:?20px;
}
</style>
</head>
<body>
<div?id="container">
<div?id="list"?style="left:?-440px">
<img?src="5.jpg">
<img?src="1.jpg">
<img?src="2.jpg">
<img?src="3.jpg">
<img?src="4.jpg">
<img?src="5.jpg">
<img?src="1.jpg">
</div>
<ul?id="buttons">
<li?index="1"></li>
<li?index="2"></li>
<li?index="3"></li>
<li?index="4"></li>
<li?index="5"></li>
</ul>
<a?href="javascript:;"?id="prev">&lt;</a>
<a?href="javascript:;"?id="next">&gt;</a>
</div>
<script?type="text/javascript">
window.onload?=?function(){
var?container?=?document.getElementById('container');
var?list?=?document.getElementById('list');
var?prev?=?document.getElementById('prev');
var?next?=?document.getElementById('next');
var?buttons?=?document.getElementById('buttons').getElementsByTagName('li');
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?animate(offset){
var?newleft?=?parseInt(list.style.left)?+?offset;
var?time?=?440;
var?inteval?=?10;
var?speed?=?offset/(time/inteval);

function?goto()?{
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(goto,?inteval);
}
else?{
list.style.left?=?parseInt(list.style.left)?+offset?+?'px';
if?(newleft?<?-2200){
list.style.left?=?-440?+?'px';
}
if?(newleft?>?-440){
list.style.left?=??-2200?+?'px';
}
}
}
debugger;
}
next.onclick?=?function(){
if?(index?==?5)?{
index?=1;
}?else?{
index?+=?1;
}
showbutton();
animate(-440);
}
prev.onclick?=?function(){
if?(index?==?1)?{
index?=5;
}?else?{
index?-=?1;
}
showbutton();
animate(440);
}
for?(var?i?=?0;?i?<?buttons.length;?i++)?{
buttons[i].onclick?=?function(){
var?myindex?=?parseInt(this.getAttribute('index'));
var?offset?=?-440?*?(myindex?-?index);
animate(offset);
index?=?myindex;
showbutton();
}
}
}
</script>
</body>
</html>