jQuery-demos輪播圖練習(一)

在jQuery外掛庫上看到一個輪播圖覺得很漂亮，就自己嘗試做了一個，實現左側小圖定時滾動，小圖和底部的原點可以點選切換大圖，離開後小圖繼續滾動，白色背景始終保持在當前圖上。

思路：HTML結構分了大圖片部分、小圖導航和底部圓點三個部分；通過克隆圖片列表加長了列表長度，當滾動到克隆的圖片部分時，將整個列表拉回原位，看起來就像連續滾動的效果了。

• 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">     //小圖導航部分 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">   //底部圓點導航部分
    <ul class="sunit">
        <li class="cur"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

複製程式碼

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;   //設定三個訊號量分別控制三個部分,降低三個部分之間的耦合性
var s_idx = 0;

//克隆兩個圖片列表
$iunit.find("li").clone().appendTo($iunit);
$nunit.find("li").clone().appendTo($nunit);

//獲取每一個裡表中的li，這裡要在克隆之後獲取，否則就只能獲取到克隆之前的個數
var $iunit_lis = $iunit.find("li");
var $nunit_lis = $nunit.find("li");
var $sunit_lis = $sunit.find("li");
複製程式碼

2.新增滑鼠移入和移除事件監聽

//新增滑鼠移入監聽，給後面加cur新增important否則權重不夠行內
$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)");
});
複製程式碼

3.左側導航部分新增點選事件監聽

$nunit_lis.click(function(){
    //當前點選的下標1-12
    idx = $(this).index();

    $(this).siblings("li").removeClass("cur");
    $(this).addClass("cur");
    //判斷下標，當大於7時，下標值減去6，返回1-6
    if(idx > 6){idx -= 6;}

    $nunit_lis.eq(idx+6).addClass("cur");
    //新增運動事件，內部判斷索引值為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");
});
複製程式碼

4.底部圓點新增點選事件監聽

$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);
});
複製程式碼

5.封裝運動函式，開啟定時器讓導航滾動起來

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);
});
複製程式碼

小結：沒有完全實現作者的所有功能，原輪播可以在滾動時自動切換當前小圖，並且始終保持在中間位置，看了一下他的原始碼是使用了一個外掛，還有一些css3的知識，最近剛開始學習css3，回頭再重新用css3重做應該會做的更好。

原始碼戳這裡

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