为什么点击小圆点没反应还会报错？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="reset.css" type="text/css" rel="stylesheet">
<script src="picture.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="images/5.jpg" alt="5">
<img src="images/1.jpg" alt="1">
<img src="images/2.jpg" alt="2">
<img src="images/3.jpg" alt="3">
<img src="images/4.jpg" alt="4">
<img src="images/5.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>
/**
* Created by vsus-pc on 2017/7/1.
*/
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');
var index=1;
function showButton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}
function animate(offset){
var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
if(newLeft>0){
list.style.left=-2400+'px';
}
if(newLeft<-3000){
list.style.left=-600+'px';
}
}
prev.onclick=function(){
if(index==1){
index=5;
}
else{
index-=1;
}
showButton();
animate(600);
};
next.onclick=function(){
if(index==5){
index=1;
}
else{
index+=1;
}
showButton();
animate(-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);
animate(offset);
index=myIndex;
showButton();
debugger;
}
}
};
慕的地01020811回答
-
李裹富
莫名其妙
随时随地看视频慕课网APP
相关分类
JavaScript