多个图片的滑动

　　在webapp中，会遇到在一个容器中显示多个图片，然后可以左右滑动的情况，于是基于jquery写了一个，智能手机上可以看到效果

　　预览地址：http://kardel.sinaapp.com/qqbuy/sy.html

$.fn.scrollImage = function (option) {
    var setting = {
        // 显示出来的图片数量
        showNum:3,
        // 滑动效果的速度
        speed:300,
        // 图片间的间隙
        gapWidth:1
    };
    if (option) {
        $.extend(setting, option);
    }
    var ulNode = $(this);
    ulNode.each(function () {
        var node = $(this);
        doScrollImage(node);
    });
    function doScrollImage(node) {
        var childList = node.children();
        // 子节点个数
        var counts = childList.length;
        // 单个元素的宽度
        var li_width = childList.width() + setting.gapWidth;
        var ulNodeWidth = li_width * counts;
        // 初始化节点的样式信息
        node.css({"width":ulNodeWidth, "left":0});
        node[0].ontouchstart = handleTouchStart;
        function handleTouchStart(e) {
            var touch = e.targetTouches[0];
            var startX = touch.pageX;
            var startY = touch.pageY;
            // 手指放下时的left值
            var currentPosition = node.css("left");
            node[0].ontouchmove = handleTouchMove;
            function handleTouchMove(moveEvent) {
                var moveTouch = moveEvent.targetTouches[0];
                var moveX = moveTouch.pageX;
                var moveY = moveTouch.pageY;
                var x = moveX - startX , y = moveY - startY;
                if (Math.abs(x) - Math.abs(y) > 10) {
                    // 阻止默认的事件
                    moveEvent.preventDefault();
                    node.css("left", parseInt(currentPosition, 10) + x);
                }
                // 判断滑动方向
                var direct = x > 0 ? "sub" : "add";
                node[0].ontouchend = handleTouchEnd;
                function handleTouchEnd() {
                    // 手放开时节点的left值
                    var leftValue = parseInt(node.css("left"), 10);
                    if (leftValue > 0) {
                        // 右滑动距离小于0，返回到0
                        node.animate({left:0}, setting.speed);
                    } else {
                        leftValue = Math.abs(leftValue);
                        var dif = ulNodeWidth - leftValue;
                        if (dif < li_width * setting.showNum) {
                            node.animate({left:-(ulNodeWidth - li_width * setting.showNum)}, setting.speed);
                        } else {
                            var all = leftValue + li_width * setting.showNum;
                            // 计算滑过的图片的张数，不足一张的需要补全一张的宽度
                            if (all % li_width != 0) {
                                // 左滑动向上取整，右滑动向下取整
                                var scrollCount = direct == "add" ? Math.ceil(all / li_width) : Math.floor(all / li_width);
                                node.animate({left:-(scrollCount - setting.showNum) * li_width}, setting.speed);
                            }
                        }
                    }
                    node[0].ontouchmove = null;
                    node[0].ontouchend = null;
                }
            }
        }
    }
}