竖的里面插横的

做个实验，第2，3，4page响应横向滑动，其他的竖向滑动。

(function($) {
    $.page = function(el) {
        var $page = {},
            $el = $(el),
            old = -1,
            cur = 0,
            total = $(".page").length,
            isMove = false;
        //页面功能
        $page.init = function() {
            $common.loadImages({ complete: function() { $page.run(); } });
            $page.event();
        };
        $page.event = function() {
            $(".back-to-page1").bind("click", function() {
                //cur = -1;
                //$page.count(true);
            });
            $(".page8 .p5").bind("click", function() {
                $(".popActiveShare").show();
            });
            $(".popActiveShare .close").bind("click", function() {
                $(".popActiveShare").hide();
            });
        };
        $page.run = function() {
            $(".loading").fadeOut();
            $common.ani.start({ status: 1, content: $(".arrow") });
            $page.show(true);
            $common.touch({
                content: $(".page"),
                complete: function(obj) {
                    if (obj.status == "up" || obj.status == "down") {
                        $page.count(obj.status);
                    } else {
                        if (cur > 4) {
                            return;
                        } else {
                            var swiLeft = function() {
                                switch (cur) {
                                    case 1:
                                        $(".page2").animate({ left: "-100%" });
                                        $(".page3").show().animate({ left: "0" });
                                        $(".page2").delay(500).hide();
                                        break;
                                    case 2:
                                        $(".page2").animate({ left: "-200%" });
                                        $(".page3").animate({ left: "-100%" });
                                        $(".page4").show().animate({ left: "0" });
                                        $(".page3").delay(500).hide();
                                        break;
                                    case 3:
                                        alert("end!")
                                        break;
                                    default:
                                }
                            };
                            var swiRight = function() {
                                switch (cur) {
                                    case 1:
                                        alert("end!")
                                        break;
                                    case 2:
                                        $(".page2").show().animate({ left: "0" });
                                        $(".page3").animate({ left: "100%" });
                                        break;
                                    case 3:
                                        $(".page3").show().animate({ left: "0" });
                                        $(".page4").animate({ left: "100%" });
                                        $(".page4").delay(500).hide();
                                        break;
                                    default:
                                }
                            };
                            if (obj.status == "left") {
                                swiLeft();
                                cur++;
                                if (cur >= 4) {
                                    cur = 4 - 1;
                                    return false;
                                }

                            } else if (obj.status == "right") {
                                swiRight();
                                cur--;
                                if (cur < 1) {
                                    cur = 1;
                                    return false;
                                }

                            }
                        }
                    }
                }
            });
        };
        $page.count = function(isUp) {
            if (isUp === "up") {
                alert(cur)
                if (cur === 1) { cur = cur + 3; } 
                else if (cur === 2) { cur = cur + 2; } 
                else {
                    cur++;
                }
                if (cur >= total ) {
                    cur = total - 1;
                    $(".page0").css({ top: "100%", display: "block" }).animate({ top: 0 });
                    $common.ani.start({ status: 1, content: $(".page0") });
                    return false;
                }
            } else if (isUp === "down") {


                if (2< cur <5) {
                    //backto
                    if(cur)
                    if(cur === 3){cur = cur -3;}
                    if(cur === 4){cur = cur -4;}
                    $(".page").hide();
                    $(".page2").show().css({ left: "0", top: "-100%" }).animate({top:"0"});
                    $(".page3").animate({ left: "100%" });
                    $common.ani.start({ status: 1, content: $(".page2") });   alert(cur)
                   }
                 cur--;
                
                if (cur < 0) {
                        $(".page").hide();
                        $(".page1").css({ top: "100%", display: "block" }).animate({ top: 0 });
                    $common.ani.start({ status: 1, content: $(".page1") });
                    cur = 0;
                    return false;
                }
            }
            $page.show(null, isUp);
        };
        $page.show = function(isFrist, isDown) {
            cur == total - 1 ? $(".arrow").fadeOut() : $(".arrow").fadeIn();
            var _old = old;
            if (old > -1) $common.ani.start({ move: true, status: 0, content: $(".page").eq(old), callback: function() { $(".page").eq(_old).hide(); } });
            $common.ani.start({ move: true, status: 1, content: $(".page").eq(cur), delay: old > -1 ? 400 : 0 });
            old = cur;
            if (_old !== 5) {
                $(".page7 .p9").hide();
            }
        };
        return $page;
    };
})(jQuery);

 序号还有些问题，需要调整从page5连续返回到第一页。

<div class="page page2">
<img class="bg" data-img="images/page2_bg.jpg" />
<img class="p1" data-img="images/page2_img_1.png" />
<img class="p2" data-img="images/page2_img_2-1-1.png" />
<img class="p3" data-img="images/page2_img_2-1-2.png" />
</div>
<div class="page page3">
<img class="bg" data-img="images/page2_bg.jpg" />
<img class="p1" data-img="images/page2_img_1.png" />
<img class="p2" data-img="images/page2_img_2-2-1.png" />
<img class="p3" data-img="images/page2_img_2-2-2.png" />
</div>
<div class="page page4">
<img class="bg" data-img="images/page2_bg.jpg" />
<img class="p1" data-img="images/page1_img_2.png" />
<img class="p2" data-img="images/page1_img_3.png" />
<img class="p3" data-img="images/page3_img_1.png" />
<img class="p4" data-img="images/page3_img_2.png" />
<img class="p5" data-img="images/page3_img_3.png" />
<img class="p6" data-img="images/page3_img_4.png" />
</div>