一个简单图片滑动效果

刚为学校的电子商务竞赛网站做了一个图片滑动效果，之前都是网上代码直接拉的，这次自己简单的做了一个，学了些新知识。以下是整体界面，不晓得怎么上传到网上浏览~

css比较重要，真个滑动窗口时包在一个div里面，并且该div的overflow为hidden，这样宽度为3600px的ul只会显示div宽度的内容。ul中的每个li向左浮动，那么整个li就会横向排列在宽度为3600px的ul中。ul的position为absolute，top为0，起始位置的left为0.这样，每次移动只需改变ul的left，便可显示不同的图片。

以下是核心css属性及jquery代码。

.box
{
    height: 275px;
    margin: 0 auto;
    position: relative;/*下面的ul通过该父级元素控制位置，必须设定为除static以外的position，relative刚好*/
    width: 900px;
    overflow: hidden;/*！ 这个很重要，将下面宽度为3600px的超出部分ul给“隐藏”了*/
    padding-bottom: 5px;
    box-shadow: 0 0 10px Silver;
    border-radius: 4px;
}
.box ul
{
    height: 275px;
    width: 3600px;/*将四个li横向排列，真正移动是ul在移动*/
    list-style: none outside none;
    position: absolute;
    top: 0px;
    left: 0px;
}
.box li
{
    display: block;
    width: 870px;
    height: 275px;
    float: left;/*向左浮动，四个li就横向排列在一起了，每次移动显现一个li*/
    padding-top: 30px;
    padding-left: 30px;
    background-color: White;
    position: relative;
}

$(function() {
    $(".nav ul li").click(function() {
        /*获取li下面a的值*/
        var curNav = $(this).children("a").text();

        /*先清空li中的class*/
        for (var i = 0; i < 4; i++) {
            $(".nav ul").find("li").eq(i).attr("class", "");
        }
        /*添加当前li的class="current"*/
        $(this).attr("class", "current");
        /*根据curNav显示对应的图片*/
        switch (curNav) {
            case "1": $(".box ul").animate({ left: "0px" }); break;
            case "2": $(".box ul").animate({ left: "-900px" }); break;
            case "3": $(".box ul").animate({ left: "-1800px" }); break;
            case "4": $(".box ul").animate({ left: "-2700px" }); break;
        }
    });
    $(".box ul li a").click(function() {
        var curNav = $(this).text();
        for (var i = 0; i < 4; i++) {
            $(".nav ul").find("li").eq(i).attr("class", "");
        }
        if (curNav < 4)
            $(".nav ul li").eq(curNav).attr("class", "current");
        else
            $(".nav ul li").eq(0).attr("class", "current");
        /*alert(curNav);*/
        switch (curNav) {
            case "1": $(".box ul").animate({ left: "-900px" }); break;
            case "2": $(".box ul").animate({ left: "-1800px" }); break;
            case "3": $(".box ul").animate({ left: "-2700px" }); break;
            case "4": $(".box ul").animate({ left: "0px" }); break;
        }
    });
});

整个代码已经上传到资源里了~~