Question

我正在尝试使用“上一页和下一页”的“部分幻灯片”。这些部分标记如下：

<section class="active">
Section 1
</section>

<section>
Section 2
</section>

<section>
Section 3
</section>

<ul class="pager">
    <li><a href="#" class="prev" data-navsec="prev">Prev</a></li>
    <li><a href="#" class="next" data-navsec="next">Next</a></li>
</ul>

除了active类之外，所有部分都是隐藏的。

我希望下一个和前一个部分在上一个时间从左侧滑入，然后在下一个时间滑入。

我可以看到jQuery Mobile不存在幻灯片功能。但我发现它与jQuery UI有关。所以我加入了那个库。

然而，仍然存在问题。我只能指定元素滑动的方向。不是从它开始的地方：

$('section.active').hide('slide', {direction: 'left'}).removeClass('active').next().show('slide', {direction: 'right'}).addClass('active');

那么，我该如何解决这个问题？

Answer 1

以下是我为你制作的JS Fiddle。希望它能给你一个清晰的想法来实现你的解决方案。

<button type="button" class="slide-left">Slide Left</button>
<button type="button" class="slide-right">Slide Right</button>
<hr>
<div class="box">
    <div>Section 1</div>

</div>
<div>
     <div>Section 2</div>
</div>


$(document).ready(function(){
    var boxWidth = $(".box").width();
    $(".slide-left").click(function(){
        $(".box").animate({
            width: 0
        });
    });
    $(".slide-right").click(function(){
        $(".box").animate({
            width: boxWidth
        });
    });
});

Answer 2

感谢Omar的参考链接我做了这个，工作解决方案：

$(document).on("pagecreate", "[data-role='page']", function()
{

    $(this).find('section').not(":eq(0)").addClass("ui-screen-hidden");
    $(this).find("section:eq(0)").addClass("active");

    $(".ui-content").on("swipeleft swiperight", function (e)
    {

        var swipe = e.type,
            nextStep = $(this).find("section.active").next("section"),
            prevStep = $(this).find("section.active").prev("section");

        switch (true)
        {
            case (swipe == "swipeleft" && nextStep.length > 0):
                $(this).find("section.active")
                    .toggleClass("slide out");
                break;
            case (swipe == "swiperight" && prevStep.length > 0):
                $(this).find("section.active")
                    .toggleClass("slide out reverse");
                break;
        }
    });

}).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", "section", function (e)
{
    var elm = $(e.target);

    switch (true)
    {
        case (elm.hasClass("out") && !elm.hasClass("reverse")):
            $(elm).toggleClass("slide out ui-screen-hidden active");
            $(elm).next("section").toggleClass("slide in active ui-screen-hidden");
            break;
        case (elm.hasClass("out") && elm.hasClass("reverse")):
            $(elm).toggleClass("slide out ui-screen-hidden reverse active");
            $(elm).prev("section").toggleClass("slide in active reverse ui-screen-hidden");
            break;
        case (elm.hasClass("in") && !elm.hasClass("reverse")):
            elm.toggleClass("slide in");
            break;
        case (elm.hasClass("in") && elm.hasClass("reverse")):
            elm.toggleClass("slide in reverse");
            break;
    }
});

使用jQuery mobile从右/左滑动单个div？

2 个答案: