圖片輪換的兩邊按鈕的加載與控制如何通過像素定位

a.aleft  

{  

      float: left;  

}  

a.agrayleft  

{  

      cursor: default;  

      background-position: -30px 50%;  

}  

a.aright  

{  

      float: right;  

      background-position: -15px 50%;  

}  

a.agrayright  

{  

      cursor: default;  

      background-position: -45px 50%;  

}  

對應的頁面代碼如下：

[html]

1. <a class="abtn aleft" href="#left" title="左移"></a><a class="abtn aright" href="#right" title="右移"></a>  

a.abtn：定義背景圖片，以及設定圖片的大小

a.aleft：定義元素左浮動

a.agrayleft：定義圖片左滑動，有圖片滑動時，按鈕的背景圖片

a.aright：定義元素右浮動，並且按鈕的背景圖片

a.agrayright：定義圖片右滑動，沒有圖片滑動時，按鈕的背景圖片

對應每個css的含義說明，通過下邊的圖片定位再加上abtn這個樣式，即可得到相應的圖片。

比如  <a class="abtn aleft" href="#left" title="左移">這個css中abtn是加載背景圖片和規定圖片的大小，aleft是設置背景圖片左浮動，兩者結合即可以定位左邊按鈕的背景 圖片，對應的<a class="abtn aright" href="#right" title="右移"></a>也是相同的道理。

對應鼠標點擊按鈕，進行滑動後，就要通過abtn agrayleft 控制有左滑動 圖片時按鈕的背景圖片，abtn agrayleft控制沒有右滑動圖片時按鈕的背景圖片。

如果想通了，其實是很好玩的，如果有什麼疑問，可以留言，我會盡快給予回復。

 

[html]

1.