基于jquery實現的仿優酷圖片輪播特效代碼

2019-11-20 10:48:44

字體：大中小

來源：轉載

供稿：網友

本文為大家分享了一種常見的并且比較復雜的輪播效果，就是優酷主界面的輪播圖，效果圖如下：

我們在書寫代碼之前，先分析效果圖的結構：

1. 左右兩個方向按鈕，可以用來切換上一張與下一張。

2. 下方有分頁指示器，用來標注滾動到了第幾張，當然，你點擊對應的按鈕，也可以跳轉到對應的圖片。

3. 中間主要顯示區域就是用來擺放需要輪播的圖片。

根據上面描述，我們首先可以書寫HTML代碼。

一、HTML代碼

<body>   <div id="youku">     <div class="anniu">       <span class="zuo"></span>       <span class="you"></span>     </div>     <ul class="tuul">       <li class="no0"><a href="#"><img src="images/0.jpg" /></a></li>       <li class="no1"><a href="#"><img src="images/1.jpg" /></a></li>       <li class="no2"><a href="#"><img src="images/2.jpg" /></a></li>       <li class="no3"><a href="#"><img src="images/3.jpg" /></a></li>       <li class="no4"><a href="#"><img src="images/4.jpg" /></a></li>       <li class="waiting"><a href="#"><img src="images/5.jpg" /></a></li>       <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li>       <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li>       <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li>     </ul>     <div class="xiaoyuandian">       <ul>         <li></li>         <li></li>         <li class="cur"></li>         <li></li>         <li></li>         <li></li>         <li></li>         <li></li>         <li></li>       </ul>     </div>   </div> </body>

代碼內容一目了然，與我上面所描述的一致；這里有兩點我需要說明：
1. class為tuul的ul，也就是存放需要輪播的圖片；里面的li主要有兩種class：包裝為 "no" 與 "waiting" 形式，其中 "no" 系列表示當前可能處于"活躍"狀態的圖片，而 "waiting" 表示這些圖片當前處于隱藏狀態，在接下來的CSS代碼中就有體現。

2. 分頁指示器默認設置第三個 li的class 為 cur. 因為tuul中初始的時候設置的 "活躍" 圖片的個數是5張，所以默認讓第三章居中顯示。但不知道大家有沒有疑惑，初始狀態的時候，界面上面顯示的圖片個數為3張，所以為什么不選擇第二張作為居中顯示的圖片？那是因為考慮到點擊左邊按鈕的情況，如果選擇第二張居中顯示，第一張是可以看到，但第一張前面就沒有圖片了。當你點擊左按鈕的時候，就 "露餡" 了。所以整體的設計思路是：界面上面顯示三張，超出界面的部分，左右各有一張，只是看不到而已。在下面的講解中，我將詳細講解這個實現過程。

二、CSS代碼

<style type="text/css">     *{       padding: 0;       margin: 0;     }     #youku{       width: 1189px;       height: 360px;       margin: 100px auto;       position: relative;       overflow: hidden;     }     #youku ul{       list-style: none;     }     #youku .tuul li{       position: absolute;       background-color: black;     }     #youku li.waiting{       display: none;     }     #youku li img{       width: 100%;       height: 100%;     }         #youku .anniu .zuo{       position: absolute;       width: 45px;       height: 45px;       background:url(images/zuo.png) no-repeat;       top:100px;       left:10px;       z-index: 1000;       cursor: pointer;     }     #youku .anniu .you{       position: absolute;       width: 45px;       height: 45px;       background:url(images/you.png) no-repeat;       top:100px;       right:10px;       z-index: 1000;       cursor: pointer;     }      #youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;}     #youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;}     #youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;}     #youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;}     #youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;}      #youku li.no1 img , #youku li.no3 img{       opacity: 0.3;     }     #youku .xiaoyuandian{       width: 600px;       height: 20px;       position: absolute;       top: 312px;       left: 454px;     }     #youku .xiaoyuandian ul li{       float: left;       width: 16px;       height: 16px;       background-color: blue;       margin-right: 10px;       border-radius: 100px;       cursor: pointer;     }     #youku .xiaoyuandian ul li.cur{       background-color:green;     }   </style>

關于這里的CSS我就不作一一說明了，如果想了解更具體的話，請參考我以前寫的系列 JS & JQuery. 這里，我只說明兩點：
1. 對 "活躍" 圖片的CSS的設置，即 #youku li.no0~no4的設置，注意到no0的left值是負數，而no1的left值是0，這就印證了上面我所表達的觀點，可視范圍靜止狀態是顯示三張圖片的，而其余兩張圖片是分別在可視范圍的左右側。注意設置各個圖片的z-index值，使得有立體層次感，值越大越靠前顯示。

2. 對可視范圍兩邊的圖片，設置opacity, 使得他們變暗。

設置完以上CSS代碼后，剖析圖如下：

三、JQuery代碼

<script type="text/javascript">     $(document).ready(       function() {         //定義一個初始速度         var sudu = 600;         var shangdi = false;          //定義json         var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"};         var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"};         var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"};         var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"};         var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"};                  var nowimg = 2;          var timer = setInterval(youanniuyewu,2000);         $("#youku").mouseenter(           function() {             clearInterval(timer);           }         );          $("#youku").mouseleave(           function() {             clearInterval(timer);             timer = setInterval(youanniuyewu,2000);           }         );           $(".you").click(youanniuyewu);         function youanniuyewu(){             if(!$(".tuul li").is(":animated") || shangdi == true){               if(nowimg < 8){                 nowimg ++;               }else{                 nowimg = 0;               }               $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");                //先交換位置               $(".no1").animate(json0,sudu);               $(".no2").animate(json1,sudu);               $(".no3").animate(json2,sudu);               $(".no4").animate(json3,sudu);               $(".no0").css(json4);                              //再交換身份               $(".no0").attr("class","waiting");               $(".no1").attr("class","no0");               $(".no2").attr("class","no1");               $(".no3").attr("class","no2");               $(".no4").attr("class","no3");               //上面的交換身份，把no0搞沒了！所以，我們讓no1前面那個人改名為no0               if($(".no3").next().length != 0){                 //如果no3后面有人，那么改變這個人的姓名為no4                 $(".no3").next().attr("class","no4");               }else{                 //no3前面沒人，那么改變此時隊列最開頭的那個人的名字為no0                 $(".tuul li:first").attr("class","no4");               }                              //發現寫完上面的程序之后，no6的行內樣式還是json0的位置，所以強制：               $(".no4").css(json4);             }                         }          $(".zuo").click(           function(){                           if(!$(".tuul li").is(":animated") || shangdi == true){                if(nowimg > 0){                 nowimg --;               }else{                 nowimg = 8;               }               $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");               //先交換位置:               $(".no0").animate(json1,sudu);               $(".no1").animate(json2,sudu);               $(".no2").animate(json3,sudu);               $(".no3").animate(json4,sudu);               $(".no4").css(json0);                //再交換身份               $(".no4").attr("class","waiting");               $(".no3").attr("class","no4");               $(".no2").attr("class","no3");               $(".no1").attr("class","no2");               $(".no0").attr("class","no1");                //上面的交換身份，把no0搞沒了！所以，我們讓no1前面那個人改名為no0               if($(".no1").prev().length != 0){                 //如果no1前面有人，那么改變這個人的姓名為no0                 $(".no1").prev().attr("class","no0");               }else{                 //no1前面沒人，那么改變此時隊列最后的那個人的名字為no0                 $(".tuul li:last").attr("class","no0");               }                $(".no0").css(json0);             }                         }         );          $("#youku .xiaoyuandian li").click(           function(){             sudu = 100; //臨時把這個速度變化一下             shangdi = true; //flag              var yonghuandexuhao = $(this).index();             if(yonghuandexuhao > nowimg ){               var cishu = yonghuandexuhao - nowimg;               console.log("主人，我已經通知上帝幫你按右按鈕" + cishu + "次");                for(var i = 1 ; i<= cishu ; i++){                 $(".you").trigger("click"); //讓上帝幫你按一次又按鈕               }              }else{               var cishu = nowimg - yonghuandexuhao;               console.log("主人，我已經通知上帝幫你按左按鈕" + cishu + "次");               for(var i = 1 ; i<= cishu ; i++){                 $(".zuo").trigger("click"); //讓上帝幫你按一次又按鈕               }             }             nowimg = yonghuandexuhao;             sudu = 600; //再把速度恢復             shangdi = false;           }                    );       }     );   </script>

JQuery代碼中關于定時器的控制，分頁按鈕的點擊，這里我就不介紹了，如果感興趣的話，請參照：JS & JQuery 里面的內容。
這里我主要說明兩點：

1. json0, json1, json2, json3, json4數據的定義，其初始值與CSS上面定義的一致，它的目的就是用來方便的切換各個圖片的絕對位置，下面我會詳細介紹到。

2. 主要講解右按鈕點擊事件，也就是youanniuyewu這個方法。

2-1） nowImg索引簡單的處理：

if(nowimg < 8){   nowimg ++; }else{   nowimg = 0; }

如果不是最后一張，點擊一下 "右按鈕"，則 nowImg值加1，如果是最后一張，則nowImg從0開始。

2-2）點擊一下 "右按鈕"，關于分頁指示器的處理：

$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");

將當前顯示的圖片對應的指示器按鈕高亮顯示，兄弟節點普通顯示。
2-3）交換圖片位置：

//先交換位置 $(".no1").animate(json0,sudu); $(".no2").animate(json1,sudu); $(".no3").animate(json2,sudu); $(".no4").animate(json3,sudu); $(".no0").css(json4);

前面四句話，會動畫執行圖片移動的效果。靜止狀態的時候是三張圖片顯示在我們眼前；運動的時候，可以想象得出最多有四張圖片顯示在我們眼前，上面四句代碼執行過程中，剖析圖如下：

即在動畫執行的過程中，"no1" 的圖片漸漸離開屏幕可視范圍，與此同時， "no4" 的圖片漸漸顯示在屏幕可視范圍。

而在動畫執行的過程中，"no0" 的這張圖片早就定位到 "no4" 的位置(此時在可視范圍之外，因為這里的animate動畫是異步執行的，不會延遲$(.no0).css(json4)這句代碼的執行。當這一組代碼執行完畢后，剖析圖如下：

此時，我們再將那些處于 "waiting" 狀態的圖片考慮進來，則此時的剖析圖如下：

2-4）以上流程執行完畢后，是完成了一次輪播效果，但是此時各個圖片的牌號順序已經被打亂，為了使得輪播繼續下去，我們應該將牌號再 "恢復" 過來。所以我們可以添加以下代碼：

//再交換身份 $(".no0").attr("class","waiting"); $(".no1").attr("class","no0"); $(".no2").attr("class","no1"); $(".no3").attr("class","no2"); $(".no4").attr("class","no3");

上面的代碼執行后，意味著將上圖中 "no0" 這張圖片拉入到 "waiting" 區域，而其他四個的編號則依次往前推算。執行完畢后，剖析圖如下：

正如上圖所示，"活躍"狀態的5張圖片，最后一張現在也變成了 "waiting" 狀態，所以需要有人替補上去，才能繼續動畫的執行。很顯然，應該拿 "waiting" 列表的第一張，也就是 "活躍" 狀態的后面一張圖片 "頂替" 上去；如果后面沒有 "waiting" 狀態的圖片了，說明這些 "waiting" 狀態的圖片全部 "跑到" class 為 tuul所有列表的前面去了，那就抓取這些列表的第一張作為 "頂替者"。代碼如下：

if($(".no3").next().length != 0){   //如果no3后面有人，那么改變這個人的姓名為no4   $(".no3").next().attr("class","no4"); }else{   //no3前面沒人，那么改變此時隊列最開頭的那個人的名字為no0   $(".tuul li:first").attr("class","no4"); }                //發現寫完上面的程序之后，no6的行內樣式還是json0的位置，所以強制： $(".no4").css(json4);

這里需要注意的是：雖然已經經歷了很多步奏的位置信息的改變及牌號的改變，但是剛剛被拉入等待區域的那張圖片在li中的與兄弟節點的位置關系并沒有發生改變，只是class屬性變成了 "waiting". 即此時的tuul中li的代碼結構如下：

<ul class="tuul">   <li class="waiting"><a href="#"><img src="images/0.jpg" /></a></li>   <li class="no0"><a href="#"><img src="images/1.jpg" /></a></li>   <li class="no1"><a href="#"><img src="images/2.jpg" /></a></li>   <li class="no2"><a href="#"><img src="images/3.jpg" /></a></li>   <li class="no3"><a href="#"><img src="images/4.jpg" /></a></li>   <li class="no4"><a href="#"><img src="images/5.jpg" /></a></li>   <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li>   <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li>   <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> </ul>

執行完以上代碼后，剖析圖如下：