很多时候有这么个需求，上下两张图片内容连续不可分割，这时需要一张接一张不间断地纵向浏览。(横向同理)
有时候还有这么个情况，1.jpg、2.jpg…9.jpg、10.jpg，但看图时的阅读顺序并不是按照我们想象中的来。
比如1.jpg、10.jpg、2.jpg…
怎么办呢？
自己做个html网页，用浏览器来阅读。
基础
<!DOCTYPE HTML>
<html>
<head>
<title>图片预览</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style>
body{text-align:center}
.box{wide:720px;margin:0 auto}
</style>
</head>
<body>
<div id="box">
<div><img id="0" src="00000.jpg" width="720px" alt="00000.jpg"/></div>
<div><img id="1" src="00001.jpg" width="720px" alt="00001.jpg"/></div>
</div>
</body>
<script type="text/javascript">
// 格式化数字
function formatInt(i){
if(i < 10){
return "0000" + i;
}else if(i < 100){
return "000" + i;
}else{
return "00" + i;
}
}
// 画出200个图片div
var box = document.getElementById("box");
html = "";
for (i = 0; i < 200; i++) {
num = formatInt(i);
src = num + ".jpg";
div = '<div><img id="' + i +'" src="' + src +'" width="720px" alt="' + src +'"/></div>';
html += div;
}
box.innerHTML = html;
/* 当图片名称与默认不符合的时候，可以找到规律后在这里修改，或直接在上方修改
for (i = 0; i < 200; i++) {
var img = document.getElementById(i); // document.querySelector("#" + i)
img.getAttributeNode("src").value = "漫画所在文件夹/" + formatInt(i) + ".jpg";
}*/
</script>
</html>
升级版
一个html文件搞定所有，存在章节切换功能。
适用于在存在多个文件夹，且图片命名基本一致的情况。
<!DOCTYPE HTML>
<html>
<head>
<title>图片预览</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style>
body{text-align:center}
#box{wide:720px;margin:0 auto}
#left{left:20px;}
#right{right:20px;}
#repaint{left:20px; top:10px;}
#hideErrorImg{left:20px; top:40px;}
.hide{display:none;}
button{top:70px;position:fixed;z-index:999;background-color:#008CBA;cursor: pointer;border: none;color: white;font-size: 16px;}
</style>
</head>
<body>
<div id="box">
<div><img id="0" src="00000.jpg" width="720px" alt="00000.jpg"/></div>
<div><img id="1" src="00001.jpg" width="720px" alt="00001.jpg"/></div>
</div>
<button id="repaint"><span>重新绘图</span></button>
<button id="hideErrorImg"><span>隐藏加载失败的图片</span></button>
<button id="left"><span>上一章</span></button>
<button id="right"><span>下一章</span></button>
</body>
<script type="text/javascript">
// 格式化数字
function formatInt(i){
if(i < 10){
return "0000" + i;
}else if(i < 100){
return "000" + i;
}else{
return "00" + i;
}
}
function loadChapter(index){
chapter = chapters[index];
document.title = chapter;
for (i = 0; i < numPic; i++) {
var img = document.getElementById(i); // document.querySelector("#" + i)
img.getAttributeNode("src").value = comicName + "/" + chapter + "/" + formatInt(i+1) + ".jpg";
if(repaint == 1){
setOnload(img);
}
if(hideErrorImg == 1){
setOnerror(img);
}
}
}
//
function setOnload(img){
img.onload = function(){
repaintImg(img);
}
}
function setOnerror(img){
img.onerror = function(){
img.className = 'hide';
}
}
// 重新画图
function repaintImg(img) {
var canvas;
if (img.nextElementSibling == null) {
canvas = document.createElement('canvas');
img.after(canvas);
} else {
canvas = document.getElementById(img.id).nextElementSibling;
}
var ctx = canvas.getContext('2d');
var s_w = img.width;
var w = img.naturalWidth;
var h = img.naturalHeight;
canvas.width = w;
canvas.height = h;
if (s_w > img.parentNode.offsetWidth || s_w == 0) {
s_w = img.parentNode.offsetWidth;
}
canvas.style.width = s_w + 'px';
var num = 10;
var remainder = parseInt(h % num);
var copyW = w;
for (var i = 0; i < num; i++) {
var copyH = Math.floor(h / num);
var py = copyH * (i);
var y = h - (copyH * (i + 1)) - remainder;
if (i == 0) {
copyH = copyH + remainder;
} else {
py = py + remainder;
}
ctx.drawImage(img, 0, y, copyW, copyH, 0, py, copyW, copyH);
}
img.className += 'hide';
}
// 获取url参数
function getQueryVariable(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
// 设置url参数
function changeURLArg(arg,arg_val){
var url = window.location.href;
var pattern=arg+'=([^&]*)';
var replaceText=arg+'='+arg_val;
if(url.match(pattern)){
var tmp='/('+ arg+'=)([^&]*)/gi';
tmp=url.replace(eval(tmp),replaceText);
return tmp;
}else{
if(url.match('[\?]')){
return url+'&'+replaceText;
}else{
return url+'?'+replaceText;
}
}
}
/* 代码*/
var comicName = "文件夹名称";
var chapters = [
'第1話_',
'第2話_',
'第3話_END'
]
var numPic = 150;
var index = getQueryVariable("p");
var repaint = getQueryVariable("re");
var hideErrorImg = getQueryVariable("hide");
var total = getQueryVariable("total");
if(total){
numPic = parseInt(total);
}
// 初始化div
var box = document.getElementById("box");
html = "";
for (i = 0; i < numPic; i++) {
num = formatInt(i+1);
src = num + ".jpg";
div = '<div><img id="' + i +'" src="' + src +'" width="720px" alt="' + src +'"/></div>';
html += div;
}
box.innerHTML = html;
if(!index){
index = 0;
window.location.href = changeURLArg("p", 0);
}else{
loadChapter(index);
}
var btnLeft = document.getElementById("left");
btnLeft.onclick = function(){
window.location.href = changeURLArg("p", parseInt(index)-1);
}
var btnRight = document.getElementById("right");
btnRight.onclick = function(){
window.location.href = changeURLArg("p", parseInt(index)+1);
}
var btnHideErrorImg = document.getElementById("hideErrorImg");
btnHideErrorImg.onclick = function(){
if(hideErrorImg == 1){
window.location.href = changeURLArg("hide", 0);
}else{
window.location.href = changeURLArg("hide", 1);
}
}
var btnRepaint = document.getElementById("repaint");
btnRepaint.onclick = function(){
if(repaint == 1){
window.location.href = changeURLArg("re", 0);
}else{
window.location.href = changeURLArg("re", 1);
}
}
</script>
</html>