【jQuery】图片轮播

<script>
    $(function(){
        var w = 0; 
        function 时钟方法(){
            $("div").eq(w).fadeOut(500,
                function(){
                    if(w<$("div").length-1){w++}else{w=0}
                    $("div").eq(w).fadeIn(500);
                }
            )
        }
        setInterval(时钟方法,1500);
    }
</script>

这是从别处粘贴来的一段代码，虽然在命名方面值得商榷，不过也还是可以理解，下面我就解释一下这段函数做了些什么：

function(){...}就是javascript的匿名方法调用，不熟悉javascript的可以参考：http://www.w3school.com.cn/js/

var w = 0; 这句话定义了一个变量w，并将初始值设为0. 建议将w改名为imageIndex，这里应该指得是div中的图片的索引，初始值设为0，表示默认指向div中的第一张图片。

function 时钟方法(){ ... } 定义了一个切换图片的方法，所以建议：1.请尽量使用英文命名 2. 请命名尽量描述出函数的功能。如function switchToNextImage{ ... }
$("div").eq(w).fadeOut(500, function() {...}) 这句话分成几部分解释：
1. $("div")取到html中对应的div元素
2. $("div").eq(w) "eq(index)"指将匹配元素集合缩减为位于指定索引的新元素。这里的意思是获取在div中索引w对应的image元素。
3. $("div").eq(w).fadeOut(500, function() {...})的意思则是使div中索引为w的image淡出，持续时间500ms。
4. $(selector).fadeOut(speed,callback) 这是fadeOut的参数列表，因此上面的500ms就是淡出的速度，后面一个参数是callback，意思是当fadeOut执行完后的回调通知。callback是一个function。
也就是下面我们讲的最后一个嵌套的方法：

function(){
    if(w<$("div").length-1){
        w++;
    }else{
        w=0;
    }
    $("div").eq(w).fadeIn(500);
}

在上面这个callback匿名函数中，首先是一个if...else...的判断。我们一句一句的解释：
1. $("div").length是指html中div容器内image的数量，那么$("div").length-1的意思就是指div容器中最后一张图片的索引，因为索引是从0开始的。也就是说如果div中有4张图片，那么
第1张图片的索引就是0，
第2张图片的索引就是1，
第3张图片的索引就是2，
第4张图片的索引就是3，索引第4张图片的索引也就是最后一张图片的索引通常也可以通过图片数量4减1等于3得到，如$("div").length-1

w是当前fadeOut的图片的索引，那么if(w<$("div").length-1)的意思就是如果当前fadeOut的图片不是最后一张，则索引加1指向下一张，
否则就是代码中的else { w = 0; }，意思就是如果当前图片时最后一张的话，那么最后一张的下一张就应该是第一张，而第一张的索引是0，而不是w++。这也是为什么这里做这样的判断的原因。
其实还有一种更简单的方法就是对$("div").length求余，这样就不用if...else...了。如 w = ++w % ($("div").length); 于是刚才的function就可以写成下面这样了：

function(){    

    w = ++w % ($("div").length);

    $("div").eq(w).fadeIn(500); 
}

上面的if...else...将索引w指向fadeOut图片的下一张图片的索引，然后执行下一张图片的fadeIn，这样就实现了图片的淡出和淡入。
最后，setInterval(时钟方法,1500); 设置了一个时间间隔，这样就实现了图片的轮播效果了。