按照阿安老師的《焦點圖輪播特效》這部教程，5-1課。一步一步做的。檢查了好幾遍都沒有錯呀？為什么就是不執(zhí)行呢？別的都好了，就是點擊小圓點切換到相應的圖片不行，代碼見69-76行，哪里錯了呢？74行中的animate(offset);是起到什么作用的？<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>焦點輪播圖</title>
????<style?type="text/css">
????????*{?margin:?0;?padding:?0;?text-decoration:?none;}
????????body?{?padding:?20px;}
????????#container?{?width:?600px;?height:?400px;?border:?3px?solid?#333;?overflow:?hidden;?position:?relative;}
????????#list?{?width:?4200px;?height:?400px;?position:?absolute;?z-index:?1;}
????????#list?img?{?float:?left;}
????????#buttons?{?position:?absolute;?height:?10px;?width:?100px;?z-index:?2;?bottom:?20px;?left:?250px;}
????????#buttons?span?{?cursor:?pointer;?float:?left;?border:?1px?solid?#fff;?width:?10px;?height:?10px;?border-radius:?50%;?background:?#333;?margin-right:?5px;}
????????#buttons?.on?{??background:?orangered;}
????????.arrow?{?cursor:?pointer;?display:?none;?line-height:?39px;?text-align:?center;?font-size:?36px;?font-weight:?bold;?width:?40px;?height:?40px;??position:?absolute;?z-index:?2;?top:?180px;?background-color:?RGBA(0,0,0,.3);?color:?#fff;}
????????.arrow:hover?{?background-color:?RGBA(0,0,0,.7);}
????????#container:hover?.arrow?{?display:?block;}
????????#prev?{?left:?20px;}
????????#next?{?right:?20px;}
????</style>
<script?type="text/javascript">
window.onload=function?(){
var?container=document.getElementById('container');//獲取容器
var?list=document.getElementById('list');//獲取圖片列表的div
var?buttons=document.getElementById('buttons').getElementsByTagName('span');//獲取5個小按鈕
var?prev=document.getElementById('prev');//獲取左箭頭
var?next=document.getElementById('next');//獲取右箭頭
var?index=1;//用以確認亮起第幾個小圓點或第幾張圖片
next.onclick=function?(){//鼠標點擊右箭頭，執(zhí)行函數(shù)
????list.style.left=list.offsetLeft-600+'px';//left值等于當前l(fā)eft值減600
if(list.offsetLeft<-3000){list.style.left=-600+'px'}//如果當前高度小于-3000，left值變?yōu)?600，這樣實現(xiàn)無盡滾動
if(index==5){index=1}//如果隨著點擊，index值變?yōu)?，則回到1，也就是當圖片到最后一個時，繼續(xù)點擊則回到第一個小圓點亮起
else{index=index+1;}//index值每次增加1
showbutton();//小圓點亮起函數(shù)，詳見43行
}
prev.onclick=function?(){//鼠標點擊左箭頭，執(zhí)行函數(shù)
list.style.left=list.offsetLeft+600+'px';//left值等于當前l(fā)eft值加600
if(list.offsetLeft>-600){list.style.left=-3000+'px'}//如果當前高度大于-600，left值變?yōu)?3000，這樣實現(xiàn)無盡滾動
if(index==1){index=5}//如果隨著點擊，index值變?yōu)榱?，則回到5，也就是當圖片到第一個時，繼續(xù)點擊左按鈕則回到最后一個小圓點亮起
else{index=index-1;}//index值每次增加1
showbutton();//小圓點亮起函數(shù)，詳見43行
}
function?showbutton(){//該函數(shù)為實現(xiàn)下方小圓點功能所立，用于34行
for(var?i=0;?i<buttons.length;?i++){//遍歷小圓點buttons
if(buttons[i].className=='on'){//如果有小圓點css為on，則其他小圓點都為空
buttons[i].className='';
break;//退出（貌似沒意義？）
}
}
buttons[index-1].className='on'; //隨著每次點擊，小圓點亮起
}
for(var?i=0;?i<buttons.length;?i++){//該處為實現(xiàn)點擊小圓點切換到相應圖片代碼
buttons[i].onclick=function?(){
var?myindex=parseInt(this.getAttribute('index'));//獲取<HTML>中的index屬性，并轉(zhuǎn)換為純數(shù)字，這里不能用this.index，因為index是自定義屬性。而getAttribute()即可以獲取自帶屬性和自定義屬性
var?offset=-600*(myindex-index);//算出每次點擊小圓點的偏移量，（目標值-原始值）*-600
animate(offset);
index=myindex;//切換完了更新當前index值
}
}
}
</script>
</head>
<body>
<div?id="container">
????<div?id="list"?style="left:?-600px;">
????????<img?src="img/5.jpg"?alt="1"/>
????????<img?src="img/1.jpg"?alt="1"/>
????????<img?src="img/2.jpg"?alt="2"/>
????????<img?src="img/3.jpg"?alt="3"/>
????????<img?src="img/4.jpg"?alt="4"/>
????????<img?src="img/5.jpg"?alt="5"/>
????????<img?src="img/1.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>
圖片輪播器，點擊小圓點按鈕實現(xiàn)圖片切換。別的都對。哪里錯了呀！
Tang小溪
2016-08-14 09:40:00