Question

我在过去几个小时里一直试图创建一个漫画书在线阅读器，以允许我的图像加载。一切正常，但我使用一个基本上使用增量方法的计数器，它只是不起作用，因为降低增量会破坏功能。

也许有一种更简单的方法？ jQuery也是最难学的语言，与HTML或PHP不同，jQuery有一个几乎没有组织的文档。就像在这里所有的东西现在都读了每一个，也许你会找到你的。我的代码在

之下

<script>

    $(function manga () {
        var count = 0;
        var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
        $("#left").click(function () {
            var img = images[count % images.length];
            ++count;
            $("#manga").attr("src", img);
            //alert("clicked");
            manga();
        });
        $("#right").click(function () {
            var img = images[count % images.length];
            --count;
            $("#manga").attr("src", img);
            //alert("clicked");
            manga();
        });
        manga();
    });

</script>

<title></title>

<center>
    <img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />

    <div >
        <img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
    </div>

    <img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>

Answer 1

基本上你用你的功能漫画3次首先它加载当你左键点击时右键单击

在此初始化计数器中，每次都能跟踪图像你的调用函数再次初始化为0 所以你的计数从0开始。

所以为了避免它使你的count变量全局声明它在manga（）函数之外。

结帐此代码

<script>
var count = 0;
$(function manga () {
    var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
    $("#left").click(function () {
        ++count;
        var img = images[count % images.length];
        alert(img);
        $("#manga").attr("src", img);
        //alert("clicked");
        manga();
    });
    $("#right").click(function () {
        if(count == 0)
        {
            count = images.length-1;
        }
        else {
            --count;
        }

        var img = images[count % images.length];
        alert(img);
        $("#manga").attr("src", img);
        //alert("clicked");
        manga();
    });
    manga();
});

</head>

<body>

<center>
    <center>
    <img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />

    <div >
        <img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
    </div>

    <img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>
</center>

我在左右两次点击中更改了count变量的位置。并在左键单击中添加一个if条件，以便在页面首次加载时，如果用户首先单击向左箭头，则将显示最后一个图像。所以image src将从头到尾移动。它会起作用。

使用图像制作书籍阅读器[jquery]

1 个答案: