制作時間：14:00 - 16：00

妙味課堂視頻鏈接：圖片輪播效果

這個看上去比較復(fù)雜，其實只是寫css比較麻煩。所以今天只是了解下實現(xiàn)過程做一個簡單的效果，明天把css做一下。

html代碼：

    <input type="button" value="<---">
    <input type="button" value="--->">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

CSS代碼

.box1{width:100px; height: 100px;background-color: red; 
      position: absolute; left: 100px; top:100px;}
.box2{width:100px; height: 100px;background-color: yellow; 
      position: absolute; left: 250px; top:50px;}
.box3{width:100px; height: 100px;background-color: blue; 
      position: absolute; left: 400px; top:100px;}

呈現(xiàn)圖.png

這個效果最核心的思想是：數(shù)組切換

我們可以先模擬一下，假如進行一下向左方向的切換，也就是藍色往左，紅色往后，黃色往右。得到上圖的結(jié)果。那這三個正方形的位置改變可以通過它們各自的left值改變而實現(xiàn)。

看上圖的文字解釋，可以將這三個元素的left值存為數(shù)組，然后將數(shù)組第一個數(shù)放到后面，通過這樣的數(shù)組切換使這三個元素的left值切換，位置也自然切換了。前提是這三個元素的position屬性必須是absolute。

接下來的js代碼實現(xiàn)借助了jquery庫。但并不是必要的！因為之前一段時間學(xué)習(xí)了jquery，現(xiàn)在要運用實踐一下。

JS代碼

$(function(){
    var $inputs = $("input");
    var $divs = $("div");
    var arr = [];

    for(var i=0,l=$divs.length;i<l;i++){

        var x = $divs.eq(i).position();
        var left = x.left;
        var top = x.top;
        arr.push([left,top]);

    }

    $inputs.eq(0).click(function(){

        arr.push(arr[0]);
        arr.shift(arr[0]);
        for(var i=0,l=$divs.length;i<l;i++){

            $divs.eq(i).css("left",arr[i][0]);
            $divs.eq(i).css("top",arr[i][1]);

        }
    })

    $inputs.eq(1).click(function(){

        arr.unshift(arr[arr.length-1]);
        arr.pop(arr[arr.length-1]);
        for(var i=0,l=$divs.length;i<l;i++){

            $divs.eq(i).css("left",arr[i][0]);
            $divs.eq(i).css("top",arr[i][1]);

        }
    })
})

下面針對js代碼中的一些知識點以及自己犯的錯梳理一下：

代碼解釋.jpg

編號對應(yīng)上圖編號

1. var divs = $("div") ：divs是一個數(shù)組對象，通過instanceof來驗證。
   var $divs = $("div")：$divs是一個jquery對象。

2. 獲取元素的個數(shù)：$divs.length
   而非：$divs.length()
   ( 自己犯錯，注意！)

3. 獲取元素的left值：position() 方法 -----> W3CSchool用法Link

4. 復(fù)合數(shù)組：因為要改變的不止是left值，還有top值等需要切換的屬性。

5. pop() ：用法Link
   push() ： 用法Link
   shift() ： 用法Link
   unshift ：用法Link

6. 當(dāng)left值切換后，賦給元素，用到 jquery 的 css() 方法。用法Link
   囧：我在做的過程中，傻乎乎以為還是用position()方法改值。。。

---------結(jié)束

不積跬步無以至千里