我正在开发一个 android epub 2 阅读器，我的阅读器运行流畅，除了在幻灯片上它总是有超过 5 页。我的幻灯片有 15 个高度为 270 像素的图像，我的第一个结论是我的幻灯片中的所有图像都增加了我的 epub 的总长度它被划分为 728px（我的 webview 的宽度），这就是为什么我形成一个条件，将图像的所有高度加起来然后我将它减去我的 epub 的总长度并划分为 728px 但答案不足以显示确切的页面。它只显示了 11 页而不是 12 页。
这是我的 Javascript 代码：
函数calculateOffset(firstLoad){
var offset = 0;
var pos = $('#' + pageEndMarker).position();
var slideshowImageHeight = 0;
var listLength = 0;
var slideshowExist = false;
if(document.getElementById("slideshow")){
slideshowExist = true;
var images, list;
var ImageHeight = 0;
slideshowExist = true;
//This code is for getting all the ul elements with "slideshow" id
//and total all the length of all the li element;
images = document.getElementById("slideshow");
list = images.getElementsByTagName('li');
// the answer is 15 becaused it has 15 list of images
listLength = list.length;
//this code is to compute the total height of the images.
//I did subtract 1 on the listLength,because i will subtract the listLength with the value of 14 elements on the total epub length. so that only one image size will add to the total epub length and that will serve as the height of the entire slideshow.
for(var i = 0; i < listLength-1; i++) {
imgHeight += $("li").height();
slideshowImageHeight = imgHeight;//the answer is 11648
}
}
if(pos!=null){
var excessWidth = pos.left % desiredWidth;
if(excessWidth > desiredWidth / 2) {
offset = (pos.left + desiredWidth) - excessWidth;
} else {
offset = pos.left - excessWidth;
//this code is to subtract the total slideshowImageHeight
if(slideshowExist){
//the offset should have a value of 8008 instead of 7878 to be come 12pages in android code
offset = offset - slideshowImageHeight;//11648 - 3780 = 7868
}
}
}
这是我在android上的代码：
public void setOffset(int offsetWidth) {
if (VibeGlobalData.mVibeReaderActivity != null) {
VibeGlobalData.mVibeReaderActivity.getWebView().setOffsetWidth(
offsetWidth);
int width = getWidth();
if (width > 0) {
//this code divides the total offset from javascript
int pageSize = offsetWidth / width; // 7868 / 728 = 10.8076
VibeGlobalData.mVibeBook.setCurrentPageSize(pageSize);//this code has a class that will get the total pageSize = 10.8076 then rounded to 10 then adds 1 = 11 pages;
}
VibeGlobalData.mVibeReaderActivity.sendHandlerMsg(
VibeReaderActivity.GUIHandler.MSG_OFFSET_CHANGED, null);
}
}
这是我的 epub 2 的代码：但这已经调整为 width = 462px & height = 270px：
<!-- SLIDESHOW-->
<div class="slideshow-wrap">
<ul class="slideshow" id="slideshow">
<li ><img src="assets/images/she-epow1_p47_slide1.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide2.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide3.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide4.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide5.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide6.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide7.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide8.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide9.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide10.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide11.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide12.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide13.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide14.png" style="width: 700px;" /></li>
<li ><img src="assets/images/she-epow1_p47_slide15.png" style="width: 700px;" /></li>
</ul>
<nav class="slideshow-controls"> <a class="play">»</a> </nav>
</div>
我观察到其他 epub 阅读器，一些阅读器只显示图像列表而不是幻灯片，其他阅读器也有同样的问题，它有 5 个多余的页面，而其他的根本不显示幻灯片.. epub 2 是否可以显示幻灯片没有任何错误？