 
//初始化頁面 
function init() { 
var ary = JSONToArray(XMLReader("node","content.dibi")); 
var divtoc = document.getElementById("div_toc"); 
pageCount = ary.length; 
for(k = 0; k < ary.length; k++){ 
obj = eval('(' + ary[k] + ')'); 
divtoc.innerHTML += "<a href='javascript:changeImage(" + obj.page.substring(obj.page.length-1) + ")'>" 
+ obj.label + "</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"; 
} 

page = 1; 
changeImage(page); 

var pageManager = document.getElementById("div_page"); 
pageManager.innerHTML = "<a href='javascript:changePage(0)'>上一頁</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" 
+ "<a href='javascript:changePage(1)'>下一頁</a><br/><br/>"; 

var ary2 = JSONToArray(XMLReader("meta","content.dibi")); 
var divmeta = document.getElementById("div_meta"); 
var styStr = "<table>" 
for(l = 0; l < ary2.length; l++){ 
obj2 = eval('(' + ary2[l] + ')'); 
styStr += "<tr><td>" + obj2.name + "</td><td>" + obj2.content + "</td></tr>"; 
} 
divmeta.innerHTML = styStr + "</table>"; 
} 

//解析.dibi 文件。 
function XMLReader(key,fileName) { 
var parse = BrowserValidator(); 
parse.load(fileName); 
var json = ""; 
try{ 
var dom = parse.documentElement; 
var attrLength = 0; 
for (i = 0; i < dom.getElementsByTagName(key).length; i++) { 
attrLength = dom.getElementsByTagName(key)[i].attributes.length; 
objMsg = ",{"; 
for(j = 0; j < attrLength; j++){ 
objMsg += "'" + dom.getElementsByTagName(key)[i].attributes[j].name 
+ "':'" + dom.getElementsByTagName(key)[i].attributes[j].value + "',"; 
} 
objMsg = objMsg.substring(0,objMsg.length-1); 
json += objMsg + "}"; 
} 
json = json.substring(1); 
}catch(e){} 
return json; 
} 

//判斷瀏覽器類型。支持 IE ，fireFox。 
function BrowserValidator(){ 
var result; 
if(!window.DOMParser && window.ActiveXObject) { 
result = new ActiveXObject("Microsoft.XMLDOM"); 
result.async = false; 
} 
else if(document.implementation && document.implementation.createDocument) { 
result = document.implementation.createDocument("", "", null); 
result.async = false; 
} 
return result; 
} 

var page = 1; //當(dāng)前頁 
var pageCount; //總頁數(shù) 

//根據(jù)點(diǎn)擊改變頁面圖片 
function changeImage(page1){ 
page = page1; 
var divimg = document.getElementById("div_img"); 
divimg.innerHTML = "<img width='500' src = 'images/" + page +".jpg'/>"; 
} 

//上頁及下頁 
function changePage(flag){ 
if(flag == 0 && page > 1){ 
page--; 
} 
if(flag == 1 && page < pageCount){ 
page++; 
} 
changeImage(page); 
} 


//將 JSON 數(shù)據(jù)轉(zhuǎn)換成數(shù)組 
function JSONToArray(json){ 
return json.replace(new RegExp("},", "g"), "}|").split("|"); 
} 

HTML 端：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title></title> 
<script language="javascript" type="text/javascript" charset='gbk' src="xmlhelper.js"></script> 
</head> 
<body onload="init()"> 
<div id="div_toc"></div> 
<div id="div_img"></div> 
<div id="div_page"></div> 
<div id="div_meta"></div> 
</body> 
</html> 

XML 端：略。