在过去的几个小时里,我一直在尝试创建一个漫画书在线阅读器,以允许加载我的图像。 一切正常,但我基本上使用使用增量方法的计数器,但它不起作用,因为降低增量会破坏函数。
也许有更简单的方法?此外,与 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/