用jQuery實現優酷首頁輪播圖_ZenDei技術網路在線

▓▓▓▓▓▓ 大致介紹看到了一個輪播圖的思路，就想的自己動手實踐一下，總體來說用jQuery實現起來簡單多了如果對代碼中使用的方法有疑問，可以參考我的jQuery學習之路(持續更新)，裡面有講解；或者你和我一樣學習jQuery不久，那你可以看看我的jQuery小案例(持續更新)，互相學習！預覽 ...

▓▓▓▓▓▓ 大致介紹

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

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

　　預覽：優酷首頁輪播圖

▓▓▓▓▓▓ 思路

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

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

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

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

 1     <div class="lunbo">
 2         <div class="picture">
 3             <ul>
 4                 <li><img src="img/1.jpg"></li>
 5                 <li><img src="img/2.jpg"></li>
 6                 <li><img src="img/3.jpg"></li>
 7                 <li><img src="img/4.jpg"></li>
 8                 <li><img src="img/5.jpg"></li>
 9             </ul>
10         </div>
11         <ul class="btn">
12             <li id="active"><div></div></li>
13             <li><div></div></li>
14             <li><div></div></li>
15             <li><div></div></li>
16             <li><div></div></li>
17         </ul>
18         <div id="left"><img src="img/left.png"></div>
19         <div id="right"><img src="img/right.png"></div>
20     </div>

View Code

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 .lunbo{
 6     width: 100%;
 7     height: 410px;
 8     position: relative;
 9     text-align: center;
10 
11 }
12 .picture{
13     width: 1190px;
14     height: 480px;
15     position: absolute;
16     top: 0;
17     left: 88px;
18     overflow: hidden;
19 }
20 .picture li{
21     width: 1190px;
22     height: 410px;
23     margin: 0 auto;
24     list-style-type: none;
25     margin-top: 70px;
26     position: absolute;
27     overflow: hidden;
28     top: ;
29     left: ;
30 
31 }
32 .picture  img{
33     cursor: pointer;
34 }
35 .btn{
36     display: block;
37     width: 150px;
38     height: 30px;
39     position: absolute;
40     top: 460px;
41     left: 130px;
42 }
43 
44 .btn li{
45     display: block;
46     width: 10px;
47     height: 10px;
48     background-color:white;
49     list-style-type: none;
50     position: absolute;
51     top: 0px;
52     left: 0px;
53     border-radius: 10px;
54     cursor: pointer;
55 }
56 #active{
57     background-color: #03A9F4;
58 }
59 .btn li:hover{
60     background-color:#9e9e9e;
61 }
62 
63 #left{
64     position: absolute;
65     top: 240px;
66     left: 90px;
67     cursor: pointer;
68 }
69 #right{
70     position: absolute;
71     top: 240px;
72     left: 1220px;
73     cursor: pointer;
74 }

View Code

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

 1     function setCirPos(){
 2         // 設置圓點的位置
 3         $cir.each(function(){
 4             $(this).css({
 5                 left:$(this).index()*25 + 500
 6             })
 7         });
 8         // 設置剛開始不顯示的圖片的位置
 9         $pic.slice(1).each(function(){
10             $(this).css({
11                 left:$picW
12             })
13         })
14     }

View Code

▓▓▓▓▓▓ 自動輪播

　　先來看看定義的全局變數

 1     var $cir = $('.btn li');
 2     var $pic = $('.picture li');
 3     var $picW = $pic.width();
 4     var $oLeft = $('#left');
 5     var $oRight = $('#right');
 6 
 7     // 當前圖片
 8     var nowPic = 0;
 9     // 防止用戶連續的點擊
10     var canClick = true;
11     // 定時器
12     var timer = null;

View Code

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

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

 1     // 設置定時器自動切換
 2     timer = setInterval(function(){
 3         auto();
 4     },2000);
 5 
 6     //自動切換 
 7     function auto(){
 8         var index = nowPic + 1;
 9         if(index < 0){
10             index = 4;
11         }else if(index > 4){
12             index = 0;
13         }
14         $pic.eq(index).css('left',$picW);
15         $pic.eq(nowPic).animate({left:-$picW}, 400);
16         $pic.eq(index).animate({left:0}, 400);
17 
18         nowPic = index;
19         // 設置當前圖片的圓點的樣式
20         $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
21     }

View Code

▓▓▓▓▓▓ 點擊小圓點

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

 1     function lunbo(){
 2         $cir.click(function(){
 3             clearInterval(timer);
 4             var index = $(this).index();
 5 
 6             if(index > nowPic){
 7                 // 點擊的值大於當前的值
 8                 $pic.eq(index).css('left',$picW);
 9                 $pic.eq(nowPic).animate({left:-$picW},400);
10             }else if(index < nowPic){
11                 // 點擊的值小於當前的值
12                 $pic.eq(index).css('left',-$picW);
13                 $pic.eq(nowPic).animate({left:$picW},400);
14             }
15 
16             $pic.eq(index).animate({left:0},400,function(){
17                 timer = setInterval(function(){
18                     auto();
19                 },3000);
20             });
21             nowPic = index;
22             // 設置當前圖片的圓點的樣式
23             $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
24         });
25     }

View Code

▓▓▓▓▓▓ 點擊箭頭

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

 1     // 點擊左箭頭
 2     $oLeft.click(function(){
 3 
 4         if(canClick){
 5             clearInterval(timer);
 6             canClick = false;
 7             var index = nowPic - 1;
 8             if(index < 0){
 9                 index = 4;
10             }else if(index > 4){
11                 index = 0;
12             }
13             $pic.eq(index).css('left',-$picW);
14             $pic.eq(nowPic).animate({left:$picW}, 400);
15             $pic.eq(index).animate({left:0}, 400,function(){
16                 canClick = true;
17                 timer = setInterval(function(){
18                     auto();
19                 },3000);
20             });
21 
22             nowPic = index;
23             // 設置當前圖片的圓點的樣式
24             $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
25         }
26     })

View Code

 1     // 點擊右箭頭
 2     $oRight.click(function(){
 3 
 4         if(canClick){
 5             clearInterval(timer);
 6             canClick = false;
 7             var index = nowPic + 1;
 8             if(index < 0){
 9                 index = 4;
10             }else if(index > 4){
11                 index = 0;
12             }
13             $pic.eq(index).css('left',$picW);
14             $pic.eq(nowPic).animate({left:-$picW}, 400);
15             $pic.eq(index).animate({left:0}, 400,function(){
16                 canClick = true;
17                 timer = setInterval(function(){
18                     auto();
19                 },3000);
20             });
21 
22             nowPic = index;
23             // 設置當前圖片的圓點的樣式
24             $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
25         }
26     })

View Code

▓▓▓▓▓▓ 總結

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