關於用jQuery知識來實現優酷首頁輪播圖！

標籤：image   content   tor   view   bsp   自己   簡單   category   exp   

　　看到了一個輪播圖的思路，就想的自己動手實踐一下，總體來說用jQuery實現起來簡單多了

　　如果對代碼中使用的方法有疑問，可以參考我的jQuery學習之路(持續更新)，裡面有講解；或者你和我一樣學習jQuery不久，那你可以看看我的jQuery小案例(持續更新)，互相學習！

　　預覽：優酷首頁輪播圖

 

▓▓▓▓▓▓ 思路

　　思路其實非常簡單，就是當點擊圖片下面的圓點或者圖片兩邊的箭頭時，讓想要看到的圖片走到它的位置，然後當前的圖片和想要看到的圖片按照一個方向運動就可以了

　　例如：我們點擊第五個小圓點，讓第五個圖片跑到當前圖片的後面，然後一起向左運動

　　

 　　當然了，如果你想要看前面的圖片，讓圖片先跑到當前圖片的左邊，然後和當前圖片一起向右運動

 

▓▓▓▓▓▓ 基本結構與樣式

　　

View Code View Code

 

　　然後我們用jQuery來設定初始圖片的位置和小圓點的位置

View Code ▓▓▓▓▓▓ 自動輪播

　　先來看看定義的全域變數

View Code

　　

　　設定nowPic是為了記錄當前顯示的圖片，因為這個輪播圖一共有三種觸發圖片切換的方法，所以這個變數是三個方法要共用的

　　設定canClick變數是為了防止使用者在圖片切換動畫效果還未完成的時候在進行點擊

 

View Code

 

▓▓▓▓▓▓ 點擊小圓點

　　圖片切換的方法都是一樣的但是要注意，當點擊小圓點時要清楚圖片自動切換的定時器，在圖片切換完成後，在設定自動切換的定時器

View Code

 

 

▓▓▓▓▓▓ 點擊箭頭

　　當點擊箭頭時，我們為了防止使用者多次連續的點擊，所以設定了canClick這個全域變數，當點擊了箭頭時，要首先判斷是否有為完成的動畫即 canClick是否為true,如果為true,就將canCilck設定為false，防止再次點擊箭頭，然後進行圖片切換的動畫，同樣不要忘了清楚 定時器，最後當切換圖片的動畫完成時，animate()方法的回呼函數執行，將canClick設定為true

View Code View Code

 

 

▓▓▓▓▓▓ 總結

　　這個效果實現起來很簡單，就是剛開始沒有想到實現的思路（笨）。

 

轉自http://www.cnblogs.com/qqandfqr/p/6262692.html

關於用jQuery知識來實現優酷首頁輪播圖！