<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax圖片列表實例</title>
<meta name="Keywords" content="," />
<meta name="Description" content="aaaaaaaaaaaaaaaaaaaaaa" />
<style type="text/css">
<!--
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img {margin: 0;padding: 0;border: 0;font-family:"宋體";}
select,input{vertical-align:middle;font-size:12px;}
textarea{font-size:12px;}
body {background: #FFF;color:#000; font-size:12px; text-align:center;margin:5px 0;}
ul,li{list-style:none;}
ul,p,ol{line-height:20px;}
img{border:0;}
#wrap{width:750px;margin:0 auto;background:#FFF;text-align:left;}
/* main */
.MainCont{border:1px solid #b7b7b7;background:#fbfbfb;}
.TopInfo{height:33px;padding-top:2px;line-height:33px;background:#fff;border-bottom:1px solid #f1f1f1;}
.TopInfo .Info{float:left;padding-left:20px;}
.TopInfo .Info strong{color:#c00;}
.TopInfo .PageList{float:right;color:#666;padding-right:16px;}
.BotInfo{height:33px;padding-top:2px;line-height:33px;background:#fff;border-top:1px solid #f1f1f1;}
.BotInfo .Info{float:left;padding-left:20px;line-height:14px;padding-top:11px;}
.BotInfo .Info a:link,.BotInfo .Info a:visited{color:#333;text-decoration:none;}
.BotInfo .Info a:hover{color:#f00;text-decoration:underline;}
.BotInfo .Info img{vertical-align:middle;margin-right:3px;}
.BotInfo .PageList{float:right;color:#666;padding-right:16px;}
.PageList strong{color:#c00;}
.PageList a:link,.PageList a:visited{color:#0b0164;}
.PageList a:hover{color:#f00;}
.Content{width:732px;margin:0 auto;}
.Content .Line_1{clear:both;display:inline-block;}
.Content .Line_2{clear:both;background:#f0f0f0;display:inline-block;}
.Content .box{width:183px;float:left;padding:16px 0 14px;overflow:hidden;}
.Content .box table td{width:183px;height:152px;text-align:center;}
.Content .box table td img{border:1px solid #000;}
.Content .box p{width:160px;margin:0 auto;text-align:center;padding-left:12px;line-height:14px;padding-top:10px;}
-->
</style>
</head>
<body>
<div id="wrap">
<!-- 主內容 begin -->
<div class="MainCont">
<!-- 頂部信息 begin -->
<div class="TopInfo">
<div class="Info" id="TopInfo">數據讀取中...</div>
<div class="PageList" id="TopPageList">
<<首頁上頁 <strong>1</strong> 下頁末頁>>
</div>
</div>
<!-- 頂部信息 end -->
<!-- 圖片內容 begin -->
<div class="Content" id="Content">
<div style="padding:100px 0;text-align:center;">數據讀取中...</div>
</div>
<!-- 圖片內容 end -->
<!-- 頂部信息 begin -->
<div class="BotInfo">
<div class="Info"><a href="#">返回頁頂</a></div>
<div class="PageList" id="BotPageList">
<<首頁上頁 <strong>1</strong> 下頁末頁>>
</div>
</div>
<!-- 頂部信息 end -->
</div>
<!-- 主內容 end -->
</div>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
// mengjia 070313
var ImmediateData = new Array();//數據
var PageSize = 20; //每頁個數
var Page = 1; //當前頁碼
getData("http://news.sina.com.cn/news/z/qglh2008/pic/0313.xml",analyzeData); //讀取數據 getData(url,處理方法)
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}
//XML 數據讀取部分
var XmlHttp;
function getData(url,funcName) {
if (window.XMLHttpRequest) {
XmlHttp = new XMLHttpRequest()
if (XmlHttp.overrideMimeType) {
XmlHttp.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
XmlHttp.onreadystatechange = funcName;
XmlHttp.open("GET", url, true);
XmlHttp.send(null);
}
function analyzeData() { //數據xml處理程序
if (XmlHttp.readyState == 4) {
if (XmlHttp.status == 200) {
var xmldoc = XmlHttp.responseXML;
var datas=xmldoc.getElementsByTagName('data');
ImmediateData = new Array;
for(var iData = 0; iData < datas.length; iData++) {
ImmediateData.push(new Array(datas[iData].getAttribute("img"),datas[iData].getAttribute("title"),datas[iData].getAttribute("url")));
}
OutHtml();
}else{
alert('數據讀取出錯:\n\n' + XmlHttp.statusText + '');
OutoError();
}
}
}
function GotoPage(num){ //跳轉頁
Page = num;
OutHtml();
}
function OutoError(){ //顯示失敗狀態
GetObj("TopInfo").innerHTML = '讀取失敗';
GetObj("Content").innerHTML = '<div style="padding:100px 0;text-align:center;">讀取失敗</div>';
}
function OutHtml(){ //輸出HTML
if(ImmediateData.length == 0){OutoError();return;}
var Pages = Math.floor((ImmediateData.length - 1) / PageSize) + 1;
if(Page < 1)Page = 1;
if(Page > Pages)Page = Pages;
var Temp = "";
var BeginNO = (Page - 1) * PageSize + 1; //開始編號
var EndNO = Page * PageSize; //結束編號
if(EndNO > ImmediateData.length) EndNO = ImmediateData.length;
if(EndNO == 0) BeginNO = 0;
if(!(Page <= Pages)) Page = Pages;
GetObj("TopInfo").innerHTML = "共有<strong>" + ImmediateData.length + "</strong>張圖片 當前顯示 第" + BeginNO + "-" + EndNO + "篇";
//分頁
if(Page != 1){Temp = '<a href="javascript:void(0)" onclick="GotoPage(1)"><<首頁</a> <a href="javascript:void(0)" onclick="GotoPage(' + (Page - 1) + ')">上頁</a> '}else{Temp = '<<首頁上頁 '};
//完美的翻頁列表 ：）
var PageFrontSum = 5; //當頁前顯示個數
var PageBackSum = 5; //當頁后顯示個數
var PageFront = PageFrontSum - (Page - 1);
var PageBack = PageBackSum - (Pages - Page);
if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront; //前少后多，前剩余空位給后
if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack; //后少前多，后剩余空位給前
var PageFrontBegin = Page - PageFrontSum;
if(PageFrontBegin < 1)PageFrontBegin = 1;
var PageFrontEnd = Page + PageBackSum;
if(PageFrontEnd > Pages)PageFrontEnd = Pages;
if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10頁">..</a>';
for(var i = PageFrontBegin;i < Page;i ++){
Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + i + ')">' + i + '</a>';
}
Temp += ' <strong>' + Page + '</strong>';
for(var i = Page + 1;i <= PageFrontEnd;i ++){
Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + i + ')">' + i + '</a>';
}
if(PageFrontEnd != Pages) Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + (Page + 10) + ')" title="后10頁">..</a>';
if(Page != Pages){Temp += ' <a href="javascript:void(0)" onclick="GotoPage(' + (Page + 1) + ')">下頁</a> <a href="javascript:void(0)" onclick="GotoPage(' + Pages + ')">末頁>></a>'}else{Temp += ' 下頁 末頁>>'}
GetObj("BotPageList").innerHTML = Temp;
GetObj("TopPageList").innerHTML = Temp;
//圖片數據
var line = 1;
var sum = 0;
if(EndNO == 0){
GetObj("Content").innerHTML = '<div style="padding:100px 0;text-align:center;">暫無圖片</div>';
return;
}
Temp = '<div class="Line_' + line + '">\n';
for(var i = BeginNO - 1;i < EndNO;i ++){
if(sum % 4 == 0 && sum != 0){
line++;
line = line == 3?1:line;
Temp += '<div class="clearit"></div>\n</div>\n<div class="Line_' + line + '">\n';
}
Temp += '<div class="box">\n';
Temp += '<table cellspacing="0"><tr><td><a href="' + ImmediateData[i][2] + '" target="_blank"><img src="' + ImmediateData[i][0] + '" alt="' + ImmediateData[i][1] + '" /></a></td></tr></table>\n';
Temp += ' <p><a href="' + ImmediateData[i][2] + '" target="_blank">' + ImmediateData[i][1] + '</a></p>\n'
Temp += '</div>\n'
sum ++;
}
Temp += '<div class="clearit"></div>\n</div>\n';
GetObj("Content").innerHTML = Temp;
if(navigator.appName == 'Microsoft Internet Explorer')setTimeout('ChrImg()',500);
}
function ChrImg(){ //解決IE下圖片渲染問題
var ImageArray = GetObj("Content").getElementsByTagName("img");
for(var i = 0;i < ImageArray.length;i++){
if(!ImageArray[i].complete) ImageArray[i].src = ImageArray[i].src;
}
}
//--><!]]>
</script>
</body>
</html>
效果
