1. 程式人生 > >焦點輪播圖(4) 按鈕切換

焦點輪播圖(4) 按鈕切換

之前實現了箭頭切換,現在來新增按鈕切換。在點選按鈕時,直接切換到對應的圖片。

下面來為小圓點按鈕新增點選事件:

//為小圓點新增點選事件
				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);
					   
					   change(offset);
					   index = myindex;
					   showButton();
					}
				}

**直接切換時,也即直接改變left值,那麼就要先計算中間的偏移量。**比如第2張切換到第5張:
偏移量 = (5 - 2)*(-600)
通過change函式傳遞偏移量。

myindex獲取當前圖片index值,自定義屬性用getAttribute()來獲取。取到目標值後,還需要把當前的index更新

最後如果點選的是當前所顯示圖片的小圓點,那麼直接退出該函式,不用重新執行語句。