加粗部分有疑问
<!DOCTYPE html>
<html>
<head>
<title>焦点轮播图示例</title>
<meta charset = 'utf-8'>
<style>
*{
margin:0;
padding:0;
}
#container{
width:600px;
height:500px;
overflow:hidden;
position:relative;
margin:0 auto;
}
#list{
width:4200px;
height:500px;
position:absolute;
}
img{
height:500px;
width:600px;
float:left;
}
#prev{
width:40px;
height:40px;
line-height:40px;
background-color:red;
display:block;
position:absolute;
top:230px;
left:20px;
z-index:30;
text-align:center;
cursor:pointer;
}
#next{
width:40px;
height:40px;
line-height:40px;
background-color:red;
display:block;
position:absolute;
top:230px;
right:20px;
z-index:30;
text-align:center;
cursor:pointer;
}
#buttons{
width:150px;
height:30px;
position:absolute;
bottom:10px;
left:225px;
}
#buttons span{
width:20px;
height:20px;
background-color:yellow;
z-index:40;
float:left;
margin-right:8px;
border:1px solid #000;
border-radius:15px;
}
#buttons .on{
background-color:blue;
}
</style>
<script>
window.onload = function(){
var container = document.getElementById('container');
var list = document.getElementById('listImgs');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var buttons = document.getElementById('buttons').getElementsByTagName('index');
var index = 1;
function animate(offset){
var left = parseInt(list.style.left) + offset;
var totalTime = 300;
var interval = 30;
var speed = offset/(totalTime/interval);
function go(){
if((speed < 0 && parseInt(list.style.left > left)) || (speed > 0 && parseInt(list.style.left < left)) ){
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval); 浏览器中这里为什么不能渐进
}else{
list.style.left = left + 'px';
if(left < -3000){
list.style.left = -600 + 'px';
}
if(left > -600){
list.style.left = -3000 + 'px';
}
}
}
go();
}
function showButton(){
for(var i = 0; i < buttons.length; i++){
if(buttons[i].className == 'on' ){
buttons[i].className = '';
}
}
buttons[index - 1].className = 'on'; 浏览器为什么报 Uncaught TypeError: Cannot set property 'className' of undefined
}
for(var i = 0; i < buttons.length; i++){
buttons[i].onclick = function(){
var newIndex = parseInt(this.getAttribute('index'));
offset = -600 * (newIndex - index);
animate(offset);
index = newIndex;
showButton();
}
}
next.onclick = function(){
if(index == 5){
index = 1;
}else{
index += 1;
}
showButton();
animate(-600);
}
prev.onclick = function(){
if(index == 1){
index = 5;
}else{
index -= 1;
}
showButton();
animate(600);
}
}
</script>
</head>
<body>
<div id = 'container'>
<div id = 'list' style = 'left:-600px'>
<img src = 'img/9.jpg' alt = '9' >
<img src = 'img/5.jpg' alt = '5' >
<img src = 'img/6.jpg' alt = '6' >
<img src = 'img/7.jpg' alt = '7' >
<img src = 'img/8.jpg' alt = '8' >
<img src = 'img/9.jpg' alt = '9' >
<img src = 'img/5.jpg' alt = '5' >
</div>
<span id = 'prev' class = 'sow'><<</span>
<span id = 'next' class = 'sow'>>></span>
<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>
</div>
</body>
</html>
