通過學習，我理解了圖片輪播原理，學習了setTimeout()、setInterval()函數(shù)設置定時器與清除定時器clearInterval()函數(shù)，使用函數(shù)遞歸實現(xiàn)圖片滑動切換，采用輔助圖片實現(xiàn)圖片無限滾動等編程技巧。
一、焦點圖輪播特效之原理
這個焦點圖輪播特效將運用到了平時學習中的知識，例如，DOM操作、定時器、事件處理、JS動畫、函數(shù)遞歸還有無線滾動等等。
其實焦點圖輪播特效的原理十分簡單，就是通過控制存放圖片的列表里面的left值來顯示圖片。
HTML結構大致分為以下部分：
<div id="container">
<div id="list" style="left:-600px;">
</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><!--javascript:是一個偽協(xié)議，是表示在觸發(fā)<a>默認動作時，執(zhí)行一段javascript代碼，而javascript:;表示什么都不執(zhí)行，這樣點擊<a>標簽沒有任何反應-->
<a href="javascript:;" id="next" class="arrow">></a>
</div>
- 一個父容器container，父容器里面有一個圖片列表list還有一個按鈕buttons，再加上兩個代表左右箭頭的a標簽；
- javascript： 是一個偽協(xié)議，是是表示在觸發(fā)a標簽默認動作時，執(zhí)行一段javascript代碼，而javascript:;表示什么都不執(zhí)行，這樣點擊a標簽沒有任何反應；
- 為了實現(xiàn)無限滾動，在第一張圖片之前加入第五張圖片的附屬圖，在第五張圖片之后加入第一張圖片的附屬圖，實得在滾動的過程中，不會出現(xiàn)延遲現(xiàn)象；
二、焦點圖輪播特效之樣式布局
具體的CSS代碼如下：
<style>
*{
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;
bottom:20px;
left:250px;
z-index:2;
}
#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>
- 其中將父容器里面的overflow屬性設置為:hidden，并且將position設置為:relative，因為子元素list和buttons都是相對于父容器來定位的；
- 其中里面涉及到了z-index屬性：設置元素的堆疊順序。元素可擁有負的z-index屬性值，z-index僅僅能在定位元素上奏效，擁有更高層疊順序的元素總是位于更低元素的前面；
三、焦點圖輪播特效之箭頭切換
接下來就進入JS部分的編寫，首先必須是頁面加載完畢才能執(zhí)行相關的JS代碼，所以必須寫在window.onload = function(){}中，接下來先取得相關的容器和標簽，如下：
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");
}
然后要做到點擊箭頭就能切換，就必須給箭頭元素綁定一個點擊事件，通過點擊箭頭，來改變list里面style屬性中的left值，從而實現(xiàn)圖片的切換
prev.onclick = function(){
list.style.left = parseInt(list.style.left) - 600 + 'px';
}
next.onclick = function(){
list.style.left = parseInt(list.style.left) + 600 + 'px';
}
因為兩個點擊事件里面的語句十分相似，所以就將它們封裝在一個名為animate()的函數(shù)中，只需要傳進一個偏移量就可以了，如下
function animate(offset) {
list.style.left = parseInt(list.style.left) + offset + 'px';
}
prev.onclick = function(){
animate(-600);
}
next.onclick = function(){
animate(600);
}
四、焦點圖輪播特效之無限滾動
在上一節(jié)，我們已經(jīng)實現(xiàn)了箭頭的切換，但是會有一個問題，當切換到最左邊，或者最右邊時，會出現(xiàn)空白頁，因為當滾動到第五張圖片的附屬圖時，此時的left值為0，當繼續(xù)往左切換時，就會大于0，當滾動到第一張圖片的附屬圖時，此時的left值為-4200，當繼續(xù)往右切換時，就會小于-4200，所以會出現(xiàn)空白現(xiàn)象；我們要達到的效果是，當滾動到第一張圖片的附屬圖時，此時將它的left值設置回-600，當滾動到第五張圖片的附屬圖時，將left值設置回-3000，才能達到無限滾動的效果，具體代碼如下：
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
if(newLeft > -600) {
list.style.left = -3000 + 'px';
}
if(newLeft < -3000) {
list.style.left = -600 + 'px';
}
}
此時就可以實現(xiàn)無限滾動的效果了，這個時候，我們還需要加上小圓點的切換功能，這時候我們需要再引進一個變量index，來顯示當前顯示的是第幾張圖片，初始值為1；并且增加一個函數(shù)專門來亮起小圓點，如下：
function showButtons(){
buttons[index-1].className = "on";
}
每點擊一下左箭頭，index的值就要減1，每點擊一下右箭頭，index的值就加1，如下：
prev.onclick = function(){
index -= 1;
showButtons();
animate(-600);
}
next.onclick = function(){
index += 1;
showButtons();
animate(600);
}
但是這個時候會發(fā)現(xiàn)，以前的按鈕沒有關閉，而是全都亮了起來，此時就要改進一下showButtons()函數(shù)，在亮起當前按鈕的同時，將之前的按鈕至灰色，代碼如下：
function showButtons(){
for(var i = 0; i < buttons.length; i++) {
if(buttons[i].className == "on") {
buttons[i].className = "";
break;
}
}
buttons[index-1].className = "on";
}
還需要對index的值進行限制，不能讓它無限的減下去，或者加上去，修改后的代碼如下：
prev.onclick = function(){
if(index == 5) {
index = 1;
} else {
index -= 1;
}
showButtons();
animate(-600);
}
next.onclick = function(){
if(index == 1) {
index = 5;
} else {
index += 1;
}
showButtons();
animate(600);
}
五、焦點圖輪播特效之按鈕切換
實現(xiàn)完了箭頭的切換，接下來就要實現(xiàn)按鈕的切換了，就是要分別給buttons數(shù)組里面的每個元素添加一個點擊事件，跟箭頭切換不同的是，按鈕切換的偏移量需要計算，有可能跨幾幅圖片切換，還有，每張圖片里面有個index屬性，顯示自己是第幾張圖片，如下：
for(var i = 0; i< buttons.length; i++) {
buttons[i].onclick = function() {
var myIndex = parseInt(this.getAttribute('index'));
var offset = -600 * (myIndex - index);
animate(offset);
index = myIndex;//更新index值
showButton();
}
}
- 這里面有一個點需要注意，span標簽里面index屬性是屬于自定義屬性，不能通過點表示法來取得，所以要使用getAttribute()方法來獲取，即能取自定義屬性，又能取自身有的屬性；
此時還有一些需要優(yōu)化的地方，當我位于當前圖片的時候，再點擊當前按鈕，后臺還會執(zhí)行，但是我們的理想情況應該是，位于當前圖片的時候，再點擊當前按鈕，就應該不做任何事情，加一個判斷語句，優(yōu)化后的代碼如下：
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;//更新index值
showButton();
}
}
六、焦點輪播圖之動畫函數(shù)
在進行圖片的切換過程中，圖片是緩慢的移動切換的，而不是一張圖片一張圖片的切換過去，這不是我們想要的效果，這里就涉及到了javascript中的動畫效果和函數(shù)；
它的原理是在切換的過程中，不斷地進行一小段的位移，直到達到目標值，清楚了原理，接下來就來寫代碼：
我們增加了位移總時間的變量、位移間隔還有計算出每次的位移量，并且定義了一個位移函數(shù)go()，當每次的位移量小于0并且left大于新的left目標值時，還有一種情況是，每次的位移量大于0并且left小于新的left目標值時，left值就等于left加上每次的位移量，然后調用setTimeout函數(shù)不斷地遞歸調用，直到達到目標值；
function animate(offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300;//位移總時間
var interval = 10; //位移間隔
var speed = offset/(time/interval);//每次位移量
function go(){
if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speemd >0 && parseInt(list.style.left) < newLeft)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval);
}
else{
animated = false;
list.style.left = newLeft + 'px';
if(newLeft > -600){
list.style.left = -3000 + 'px';
}
if(newLeft < -3000){
list.style.left = -600 + 'px';
}
}
}
go();
}
- 這里要注意的是，setTimeout()方法接受兩個參數(shù)，一個執(zhí)行的函數(shù)代碼，一個間隔，函數(shù)會在這個間隔后執(zhí)行一次，不會重復執(zhí)行，但是因為調用的是自身，所以相當于遞歸不斷地重復執(zhí)行；
七、焦點圖輪播特效之自動播放
我們會注意到，當我們把鼠標移出圖片列表時，圖片會自動切換，當把鼠標移進去時，就會停止自動切換，這里，我們就需要引入兩個函數(shù)：play()還有stop()函數(shù)，并且為container父容器添加兩個事件：onmouseover還有onmouseout，具體的代碼如下：
function play(){
timer = setInterval(function(){
next.onclick();
},1500);
}
function stop(){
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
play();
還重新定義了一個時間變量timer，并且執(zhí)行setInterval方法，經(jīng)過間隔時間不斷地執(zhí)行函數(shù)代碼，然后停止函數(shù)里面，就清楚調這個時間變量timer；
