【原创】jquery图片移动

先发个最终的预览效果图

        //初始化向上可点次数
         var topT = 0;
         //初始化向下可点次数
        var bottomT = 0;
        //注：theback.piclist为服务器端返回的数据
        var plist = theback.piclist.split(',');
        var sleft = "";
        //总的可点击次数
        var totalT = plist.length - 5;
        //初始化向上可点次数
        topT = totalT;
        //图片大于5张
        if (plist.length > 5) {
            sleft += "<span id=\"js_up\"><a href=\"#\" onclick=\"MoveT('top')\"><img src=\"images/icon_09.gif\" /></a></span>";
        }
        sleft += "<span class=\"js_leftimg\"><div>";
        for (var i = 0; i < plist.length; i++) {
            sleft += "<a href=\"#\" class=\"xt\"><img onclick=\"LoadBigImage('" + plist[i] + "')\" src=\"" + plist[i] + "\" /></a>";
        }
        sleft += "</div></span>";
        //图片大于5张
        if (plist.length > 5) {
            sleft += "<span id=\"js_down\"><a href=\"#\" ><img src=\"images/icon_26.gif\" /></a></span>";
        }
        //左边小图列表
        $(".lfxt").html(sleft);


//根据方向移动
function MoveT(d) {
    if (d == "top") {
        if (topT > 0) {
            topT--;
            bottomT++;
            $(".js_leftimg div").animate({ top: '-=66px' }, "slow");
        }
    }
    else {
        if (bottomT > 0) {
            topT++;
            bottomT--;
            $(".js_leftimg div").animate({ top: '+=66px' }, "slow");
        }
    }
    if (topT != 0) {
        $("#js_up").html("<a href=\"#\" id=\"js_up\" onclick=\"MoveT('top')\" ><img src=\"images/icon_09.gif\" /></a>");       
    } else {
        $("#js_up").html("<a href=\"#\" onclick=\"javascript:void(0)\"><img src=\"images/icon_16.gif\" /></a>");
    }
    if (bottomT != 0) {
        $("#js_down").html("<a href=\"#\" onclick=\"MoveT('bottom')\" ><img src=\"images/icon_13.gif\" /></a>");
    } else {
        $("#js_down").html("<a href=\"#\" onclick=\"javascript:void(0)\" ><img src=\"images/icon_26.gif\" /></a>");
    }
}