Question

我正在制作一个简单的幻灯片，在计算机上查看时可以通过按钮控制，也可以在触摸屏设备上滑动手势。 This is a demo with 3 images。

每个图像，其对应的标题和导航都包含在一个div中。这是第一个：

<div class="item" id="1">
    <img src="...">
    <div class="caption">
        caption 1
    </div>
    <div class="navigation">
        <a href="#" id="1prev">&lt</a> 1 / 3 <a href="#" id="1next">&gt</a>
    </div>
</div>

使用＆＃34;点击＆＃34;显示或隐藏这些div。和＆＃34; swipeleft / swiperight＆＃34;功能。

$(document).ready(function () {
    $("#1prev").click(function () {
        $("#1").hide();
        $("#3").show();
    });
    $("#1").on("swipeleft", function () {
        $("#1").hide();
        $("#3").show();
    });
    $("#1next").click(function () {
        $("#1").hide();
        $("#2").show();
    });
    $("#1").on("swiperight", function () {
        $("#1").hide();
        $("#2").show();
    });
});

幻灯片总共将包含多达40张图片。有没有办法压缩脚本？这是一个相对有效且易于使用的解决方案代码写得正确吗？可以改进吗？

Answer 1

你可以这样做：

对于这些项目，我已将类分配给prev和next按钮而不是ID。

<div class="item" id="1">
    <img src="http://www.leecorbin.co/img1.jpg" width="50%" />
    <div class="caption">caption 1</div>
    <div class="navigation"> 
        <a href="#" class="prevBtn">&lt</a> 
        1 / 3 
        <a href="#" class="nextBtn">&gt</a>
    </div>
</div>

然后在脚本中，pagecreate

隐藏所有项目并仅显示第一项。为物品添加swipeleft和swiperight处理程序。为导航按钮添加单击处理程序在这些处理程序中，确定我们要前进的方向以及我们当前所在的幻灯片。调用方向和当前幻灯片传递的函数;它决定下一张要显示并进行过渡的幻灯片。

$(document).on("pagecreate", "#page1", function () {
    $(".item").hide().first(0).show();

    $(document).on("swipeleft swiperight", ".item", function (e) {
        var dir = 'prev';
        if (e.type == 'swipeleft') {
            dir = 'next';
        }
        GoToNextSlide($(this), dir);
    });

    $(document).on("click", ".navigation > a", function (e) {
        var dir = 'prev';
        if ($(this).hasClass("nextBtn")) {
            dir = 'next';
        }
        var $item = $(this).closest(".item");
        GoToNextSlide($item, dir);
    });

});

function GoToNextSlide($item, direction) {
    var $next;
    if (direction == 'next') {
        if ($item.next().length > 0) {
            $next = $item.next();
        } else {
            $next = $(".item").first();
        }
    } else {
        if ($item.prev().length > 0) {
            $next = $item.prev();
        } else {
            $next = $(".item").last();
        }
    }
    $item.fadeOut(function () {
        $next.fadeIn();
    });
}

更新了 DEMO

使用jQuery＆＃34;轻扫＆＃34;用于导航图像数组的功能

1 个答案: