Question

我有几页.png格式的漫画，大约300页，我想在我的网站上设置一个部分，以便用户可以阅读漫画，使用两个箭头浏览页面（＆＃34;下一页＆＃34;和＆＃34;上一页＆＃34;）。我不关心页面之间的动画。我想要实现的完美范例是MangaFox（不是整个网站，只是您可以阅读漫画的窗口）。

基本设置是：300px宽的菜单，左边是章节列表，右边是漫画页面。在漫画页面img的菜单或下面，两个箭头可以转到上一页或下一页。

我考虑过使用iframe：链接到包含每个漫画页面的HTML网页会定位iframe并显示在其中。但是，这需要我为每个页面停止HTML页面，并手动设置指向上一页和下一页的链接。我会有300个html页面，所以这会太沉重和耗时。我还尝试将章节列表直接链接到.png文件，但图像没有按照我的意愿设置样式（至少在Chrome中，它们不会出现在页面的中心，而是出现在左上角我仍然需要手动设置上一个和下一个箭头链接。

我梦想的是： - 有.png文件列表，为页面设置固定顺序; - 左侧菜单中的下拉列表可以直接指向列表中的某个页面; - 上一个和下一个箭头识别正在显示的图像，单击箭头会跳到列表中的下一个或上一个项目。如果在当前页面之前没有页面，那么＆＃34;之前的＆＃34;箭头消失了;对于＆＃34; next＆＃34;项目是列表中的最后一个箭头。

也许有一种更简单的方法，我没有想到，但我无法找到它。

提前感谢您的帮助！

（P.S。：我没有使用WordPress，只是简单的HTML，CSS和PHP）

Answer 1

这是我能想到的最简单的方法：

左箭头

<a id="leftArrow" href="#{n-1}"></a>

右箭头

<a id="rightArrow" href="#{n+1}"></a>

设置阅读location.hash的{{3}}函数，并使用您在某处定义的网页数组设置src元素的img属性：

window.onhashchange = function(){
    var img = document.query('img');
    var left = document.query('#leftArrow');
    var right = document.query('#rightArrow');
    var pageNumber = parseInt(location.hash);
    //put some error handling here for edge cases, then...
    img.src = imagesArray[pageNumber];
    left.href = '#' + (pageNumber - 1);
    right.href = '#' + (pageNumber + 1);
};

侧边菜单中的页面链接将为href="#{page number}"，点击后会触发onhashchange功能，更新图片和箭头。

希望这有帮助。

基本＆＃34;漫画阅读器＆＃34;类似的图像旋转木马

1 个答案: