图片轮播效果（一）

制作时间：14:00 - 16：00

妙味课堂视频链接：图片轮播效果

这个看上去比较复杂，其实只是写css比较麻烦。所以今天只是了解下实现过程做一个简单的效果，明天把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;}

呈现图.png

这个效果最核心的思想是：数组切换

我们可以先模拟一下，假如进行一下向左方向的切换，也就是蓝色往左，红色往后，黄色往右。得到上图的结果。那这三个正方形的位置改变可以通过它们各自的left值改变而实现。

看上图的文字解释，可以将这三个元素的left值存为数组，然后将数组第一个数放到后面，通过这样的数组切换使这三个元素的left值切换，位置也自然切换了。前提是这三个元素的position属性必须是absolute。

接下来的js代码实现借助了jquery库。但并不是必要的！因为之前一段时间学习了jquery，现在要运用实践一下。

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

编号对应上图编号

1. var divs = $("div") ：divs是一个数组对象，通过instanceof来验证。
   var $divs = $("div")：$divs是一个jquery对象。

2. 获取元素的个数：$divs.length
   而非：$divs.length()
   ( 自己犯错，注意！)

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

4. 复合数组：因为要改变的不止是left值，还有top值等需要切换的属性。

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

6. 当left值切换后，赋给元素，用到 jquery 的 css() 方法。用法Link
   囧：我在做的过程中，傻乎乎以为还是用position()方法改值。。。

---------结束

不积跬步无以至千里