用jQuery實現優酷首頁輪播圖

時間 2019-11-19

標籤 jquery 實現優酷首頁欄目 JQuery 简体版

原文原文鏈接

▓▓▓▓▓▓ 大體介紹

　　看到了一個輪播圖的思路，就想的本身動手實踐一下，整體來講用jQuery實現起來簡單多了css

　　若是對代碼中使用的方法有疑問，能夠參考個人jQuery學習之路(持續更新)，裏面有講解；或者你和我同樣學習jQuery不久，那你能夠看看個人jQuery小案例(持續更新)，互相學習！html

　　預覽：優酷首頁輪播圖ide

▓▓▓▓▓▓ 思路

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

　　例如：咱們點擊第五個小圓點，讓第五個圖片跑到當前圖片的後面，而後一塊兒向左運動學習

　　固然了，若是你想要看前面的圖片，讓圖片先跑到當前圖片的左邊，而後和當前圖片一塊兒向右運動動畫

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

 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來設置初始圖片的位置和小圓點的位置this

 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

▓▓▓▓▓▓ 自動輪播

　　先來看看定義的全局變量spa

 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是爲了記錄當前顯示的圖片，由於這個輪播圖一共有三種觸發圖片切換的方法，因此這個變量是三個方法要共享的code

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

 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     })