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

标签 javascript jquery html

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

也许有更简单的方法?此外,与 HTML 或 PHP 不同,jQuery 是最难学的语言,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>

最佳答案

基本上你调用你的函数漫画3次 首先当它加载时 第二次当你左键单击时 第三,当你右键单击时

在这个初始化计数器中,每次都会跟踪图像 你再次调用函数,将其初始化为 0 所以你的计数又从 0 开始。

因此,为了避免这种情况,请在 manga() 函数之外将您的 count 变量全局声明。

查看此代码

<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>

我在左键单击和右键单击中更改了计数变量的位置。并在左键单击中添加了一个 if 条件,以便当页面第一次加载时,如果用户首先单击左箭头,它将显示最后一张图像。 所以图像 src 将从第一个移动到最后一个。它会起作用。

关于javascript - 使用图像制作图书阅读器 [jquery],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27978279/

相关文章:

javascript - 未捕获的类型错误 : Cannot read property 'scrollTop' of undefined

javascript - jQuery KendoEditor 不剥离粘贴的 HTML

javascript - 动态更新网页图片

javascript - 添加帮助弹出窗口

javascript - 将一个物体分成三部分

c# - DataGrid ButtonColumns 的空元素 ID

javascript - underscore.js 在提供真正的随机数方面有多好?

jquery - 奇怪的 jQuery 变量传递行为

javascript - 根据所使用的字段而变化的变量

html - Angular 中的主/细节网格