基于jquery實(shí)現(xiàn)的仿優(yōu)酷圖片輪播特效代碼

更新時(shí)間：2016年01月13日 09:52:38 作者：秋恨雪

這篇文章主要為大家介紹了基于jquery實(shí)現(xiàn)的仿優(yōu)酷圖片輪播特效代碼，感興趣的小伙伴們可以參考一下

本文為大家分享了一種常見(jiàn)的并且比較復(fù)雜的輪播效果，就是優(yōu)酷主界面的輪播圖，效果圖如下：

我們?cè)跁?shū)寫(xiě)代碼之前，先分析效果圖的結(jié)構(gòu)：

1. 左右兩個(gè)方向按鈕，可以用來(lái)切換上一張與下一張。

2. 下方有分頁(yè)指示器，用來(lái)標(biāo)注滾動(dòng)到了第幾張，當(dāng)然，你點(diǎn)擊對(duì)應(yīng)的按鈕，也可以跳轉(zhuǎn)到對(duì)應(yīng)的圖片。

3. 中間主要顯示區(qū)域就是用來(lái)擺放需要輪播的圖片。

根據(jù)上面描述，我們首先可以書(shū)寫(xiě)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>

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

2. 分頁(yè)指示器默認(rèn)設(shè)置第三個(gè) li的class 為 cur. 因?yàn)閠uul中初始的時(shí)候設(shè)置的 "活躍" 圖片的個(gè)數(shù)是5張，所以默認(rèn)讓第三章居中顯示。但不知道大家有沒(méi)有疑惑，初始狀態(tài)的時(shí)候，界面上面顯示的圖片個(gè)數(shù)為3張，所以為什么不選擇第二張作為居中顯示的圖片？那是因?yàn)榭紤]到點(diǎn)擊左邊按鈕的情況，如果選擇第二張居中顯示，第一張是可以看到，但第一張前面就沒(méi)有圖片了。當(dāng)你點(diǎn)擊左按鈕的時(shí)候，就 "露餡" 了。所以整體的設(shè)計(jì)思路是：界面上面顯示三張，超出界面的部分，左右各有一張，只是看不到而已。在下面的講解中，我將詳細(xì)講解這個(gè)實(shí)現(xiàn)過(guò)程。

二、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>

關(guān)于這里的CSS我就不作一一說(shuō)明了，如果想了解更具體的話(huà)，請(qǐng)參考我以前寫(xiě)的系列 JS & JQuery. 這里，我只說(shuō)明兩點(diǎn)：
1. 對(duì) "活躍" 圖片的CSS的設(shè)置，即 #youku li.no0~no4的設(shè)置，注意到no0的left值是負(fù)數(shù)，而no1的left值是0，這就印證了上面我所表達(dá)的觀點(diǎn)，可視范圍靜止?fàn)顟B(tài)是顯示三張圖片的，而其余兩張圖片是分別在可視范圍的左右側(cè)。注意設(shè)置各個(gè)圖片的z-index值，使得有立體層次感，值越大越靠前顯示。

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

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

三、JQuery代碼

<script type="text/javascript"> 
    $(document).ready( 
      function() { 
        //定義一個(gè)初始速度 
        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搞沒(méi)了！所以，我們讓no1前面那個(gè)人改名為no0 
              if($(".no3").next().length != 0){ 
                //如果no3后面有人，那么改變這個(gè)人的姓名為no4 
                $(".no3").next().attr("class","no4"); 
              }else{ 
                //no3前面沒(méi)人，那么改變此時(shí)隊(duì)列最開(kāi)頭的那個(gè)人的名字為no0 
                $(".tuul li:first").attr("class","no4"); 
              } 
               
              //發(fā)現(xiàn)寫(xiě)完上面的程序之后，no6的行內(nèi)樣式還是json0的位置，所以強(qiáng)制： 
              $(".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搞沒(méi)了！所以，我們讓no1前面那個(gè)人改名為no0 
              if($(".no1").prev().length != 0){ 
                //如果no1前面有人，那么改變這個(gè)人的姓名為no0 
                $(".no1").prev().attr("class","no0"); 
              }else{ 
                //no1前面沒(méi)人，那么改變此時(shí)隊(duì)列最后的那個(gè)人的名字為no0 
                $(".tuul li:last").attr("class","no0"); 
              } 
 
              $(".no0").css(json0); 
            } 
              
          } 
        ); 
 
        $("#youku .xiaoyuandian li").click( 
          function(){ 
            sudu = 100; //臨時(shí)把這個(gè)速度變化一下 
            shangdi = true; //flag 
 
            var yonghuandexuhao = $(this).index(); 
            if(yonghuandexuhao > nowimg ){ 
              var cishu = yonghuandexuhao - nowimg; 
              console.log("主人，我已經(jīng)通知上帝幫你按右按鈕" + cishu + "次"); 
 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".you").trigger("click"); //讓上帝幫你按一次又按鈕 
              } 
 
            }else{ 
              var cishu = nowimg - yonghuandexuhao; 
              console.log("主人，我已經(jīng)通知上帝幫你按左按鈕" + cishu + "次"); 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".zuo").trigger("click"); //讓上帝幫你按一次又按鈕 
              } 
            } 
            nowimg = yonghuandexuhao; 
            sudu = 600; //再把速度恢復(fù) 
            shangdi = false; 
          } 
           
        ); 
      } 
    ); 
  </script>

JQuery代碼中關(guān)于定時(shí)器的控制，分頁(yè)按鈕的點(diǎn)擊，這里我就不介紹了，如果感興趣的話(huà)，請(qǐng)參照：JS & JQuery 里面的內(nèi)容。
這里我主要說(shuō)明兩點(diǎn)：

1. json0, json1, json2, json3, json4數(shù)據(jù)的定義，其初始值與CSS上面定義的一致，它的目的就是用來(lái)方便的切換各個(gè)圖片的絕對(duì)位置，下面我會(huì)詳細(xì)介紹到。

2. 主要講解右按鈕點(diǎn)擊事件，也就是youanniuyewu這個(gè)方法。

2-1） nowImg索引簡(jiǎn)單的處理：

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

如果不是最后一張，點(diǎn)擊一下 "右按鈕"，則 nowImg值加1，如果是最后一張，則nowImg從0開(kāi)始。

2-2）點(diǎn)擊一下 "右按鈕"，關(guān)于分頁(yè)指示器的處理：

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

將當(dāng)前顯示的圖片對(duì)應(yīng)的指示器按鈕高亮顯示，兄弟節(jié)點(diǎn)普通顯示。
2-3）交換圖片位置：

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

前面四句話(huà)，會(huì)動(dòng)畫(huà)執(zhí)行圖片移動(dòng)的效果。靜止?fàn)顟B(tài)的時(shí)候是三張圖片顯示在我們眼前；運(yùn)動(dòng)的時(shí)候，可以想象得出最多有四張圖片顯示在我們眼前，上面四句代碼執(zhí)行過(guò)程中，剖析圖如下：

即在動(dòng)畫(huà)執(zhí)行的過(guò)程中，"no1" 的圖片漸漸離開(kāi)屏幕可視范圍，與此同時(shí)， "no4" 的圖片漸漸顯示在屏幕可視范圍。

而在動(dòng)畫(huà)執(zhí)行的過(guò)程中，"no0" 的這張圖片早就定位到 "no4" 的位置(此時(shí)在可視范圍之外，因?yàn)檫@里的animate動(dòng)畫(huà)是異步執(zhí)行的，不會(huì)延遲$(.no0).css(json4)這句代碼的執(zhí)行。當(dāng)這一組代碼執(zhí)行完畢后，剖析圖如下：

此時(shí)，我們?cè)賹⒛切?處于 "waiting" 狀態(tài)的圖片考慮進(jìn)來(lái)，則此時(shí)的剖析圖如下：

2-4）以上流程執(zhí)行完畢后，是完成了一次輪播效果，但是此時(shí)各個(gè)圖片的牌號(hào)順序已經(jīng)被打亂，為了使得輪播繼續(xù)下去，我們應(yīng)該將牌號(hào)再 "恢復(fù)" 過(guò)來(lái)。所以我們可以添加以下代碼：

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

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

正如上圖所示，"活躍"狀態(tài)的5張圖片，最后一張現(xiàn)在也變成了 "waiting" 狀態(tài)，所以需要有人替補(bǔ)上去，才能繼續(xù)動(dòng)畫(huà)的執(zhí)行。很顯然，應(yīng)該拿 "waiting" 列表的第一張，也就是 "活躍" 狀態(tài)的后面一張圖片 "頂替" 上去；如果后面沒(méi)有 "waiting" 狀態(tài)的圖片了，說(shuō)明這些 "waiting" 狀態(tài)的圖片全部 "跑到" class 為 tuul所有列表的前面去了，那就抓取這些列表的第一張作為 "頂替者"。代碼如下：

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

這里需要注意的是：雖然已經(jīng)經(jīng)歷了很多步奏的位置信息的改變及牌號(hào)的改變，但是剛剛被拉入等待區(qū)域的那張圖片在li中的與兄弟節(jié)點(diǎn)的位置關(guān)系并沒(méi)有發(fā)生改變，只是class屬性變成了 "waiting". 即此時(shí)的tuul中l(wèi)i的代碼結(jié)構(gòu)如下：

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

執(zhí)行完以上代碼后，剖析圖如下：