在jQuery插件庫上看到一個輪播圖覺得很漂亮，就自己嘗試做了一個，實現(xiàn)左側(cè)小圖定時滾動，小圖和底部的原點可以點擊切換大圖，離開后小圖繼續(xù)滾動，白色背景始終保持在當(dāng)前圖上。

思路：HTML結(jié)構(gòu)分了大圖片部分、小圖導(dǎo)航和底部圓點三個部分；通過克隆圖片列表加長了列表長度，當(dāng)滾動到克隆的圖片部分時，將整個列表拉回原位，看起來就像連續(xù)滾動的效果了。

• html

<div class="images"> //大圖部分<ul class="iunit"><li><img src="images/a1.png" alt=""></li><li><img src="images/a2.png" alt=""></li><li><img src="images/a3.png" alt=""></li><li><img src="images/a4.png" alt=""></li><li><img src="images/a5.png" alt=""></li><li><img src="images/a6.png" alt=""></li></ul> </div> <div class="nav"> //小圖導(dǎo)航部分 li有6個<ul class="nunit"><li class="cur"><a href="javascript:;"><img src="images/a1x.png" alt=""><span class="title">Title</span><br><span class="descrip">Description</span></a></li></ul> </div> <div class="sub_nav"> //底部圓點導(dǎo)航部分<ul class="sunit"><li class="cur"></li><li></li><li></li><li></li><li></li><li></li></ul> </div>復(fù)制代碼

css就不放上來了，全部源文件在最后的鏈接，下面是js部分代碼:

1.獲取元素和克隆列表

var $carousel = $("#carousel"); var $iunit = $carousel.find(".iunit"); //大圖片部分的ul var $nunit = $carousel.find(".nunit"); //小圖片部分的ul var $sunit = $carousel.find(".sunit"); //圓點部分的ul var idx=0, _idx = 0; //設(shè)置三個信號量分別控制三個部分,降低三個部分之間的耦合性 var s_idx = 0;//克隆兩個圖片列表 $iunit.find("li").clone().appendTo($iunit); $nunit.find("li").clone().appendTo($nunit);//獲取每一個里表中的li，這里要在克隆之后獲取，否則就只能獲取到克隆之前的個數(shù) var $iunit_lis = $iunit.find("li"); var $nunit_lis = $nunit.find("li"); var $sunit_lis = $sunit.find("li"); 復(fù)制代碼

2.添加鼠標移入和移除事件監(jiān)聽

//添加鼠標移入監(jiān)聽，給后面加cur添加important否則權(quán)重不夠行內(nèi) $nunit_lis.mouseenter(function(){$(this).css("background-color", "rgba(255,255,255,0.3)"); }); $nunit_lis.mouseleave(function(){$(this).css("background-color", "rgba(0,0,0,0.08)"); }); 復(fù)制代碼

3.左側(cè)導(dǎo)航部分添加點擊事件監(jiān)聽

$nunit_lis.click(function(){//當(dāng)前點擊的下標1-12idx = $(this).index();$(this).siblings("li").removeClass("cur");$(this).addClass("cur");//判斷下標，當(dāng)大于7時，下標值減去6，返回1-6if(idx > 6){idx -= 6;}$nunit_lis.eq(idx+6).addClass("cur");//添加運動事件，內(nèi)部判斷索引值為6時，still移動，但是移動之后拉回到0$iunit.animate({"left": -980 * idx}, 300, function(){if(idx>5){$(this).css("left", 0);}});//小圓點跟隨信號量idx值一同改變$sunit_lis.eq(idx).addClass("cur").siblings("li").removeClass("cur"); }); 復(fù)制代碼

4.底部圓點添加點擊事件監(jiān)聽

$sunit_lis.click(function(){s_idx = $(this).index();$sunit_lis.eq(s_idx).addClass("cur").siblings("li").removeClass("cur");$iunit.animate({"left": -980 * s_idx}, 300); }); 復(fù)制代碼

5.封裝運動函數(shù)，開啟定時器讓導(dǎo)航滾動起來

function go(){_idx++;$nunit.animate({"top": -70 * _idx}, 300, function(){if(_idx>5){_idx=0;$nunit.css("top", 0);}}) }var timer = setInterval(go, 1000);$carousel.mouseenter(function(){clearInterval(timer); }); $carousel.mouseleave(function(){timer = setInterval(go, 1000); }); 復(fù)制代碼

小結(jié)：沒有完全實現(xiàn)作者的所有功能，原輪播可以在滾動時自動切換當(dāng)前小圖，并且始終保持在中間位置，看了一下他的源代碼是使用了一個插件，還有一些css3的知識，最近剛開始學(xué)習(xí)css3，回頭再重新用css3重做應(yīng)該會做的更好。

源代碼戳這里

剛剛學(xué)會使用GitHub，可以上傳一些之前做的demo了！加油加油，還有那么多要學(xué)的東東！css3好有意思啊，又學(xué)到好多新方法，已經(jīng)想做點什么來試試手了！

轉(zhuǎn)載于:https://juejin.im/post/5a40f4c4518825772a4b3a3b

總結(jié)

以上是生活随笔為你收集整理的jQuery-demos轮播图练习(一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。