加粗部分有疑問(wèn)
<!DOCTYPE html>
<html>
?<head>
?? <title>焦點(diǎn)輪播圖示例</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);??瀏覽器中這里為什么不能漸進(jìn)
????? }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';??瀏覽器為什么報(bào)? 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>
2016-06-18
index-1是不是小于0了?