花了1個星期，做了一個圖片察看器，支持縮略圖和分頁察看，感覺效果不錯，但是沒有加上幻燈片功能，現在把它都貼出來，有興趣的可以自個修改！
------------------------------------------------------------------------------------------------------------------------------------------------
效果請參考：http://www.updou.com/douzi/viewbean?beanid=10000737
使用的時候把它保存爲photo_view.js文件，然後再HTML中嵌入即可
<script language="javascript" src="photo_view.js" type="text/javascript"></script>
-------------------------------------------------------------------------------------------------------------------------------------------------
/*
*
*/
/*
* 爲了避免在做嵌入時出現動態生成的Node的ID相同，給預定義的名稱加上一個隨機數的後綴
*/
var suffix = Math.ceil( Math.random() * 1000000000000);
var loadingIndex = Math.ceil( Math.random() * 10000);
/*
* 顯示圖片的容器的配置信息
*/
var Config = {
cW : 320, //(自動計算)-容器中用來顯示圖片的寬度
cH : 320, //(自動計算)-容器中用來顯示圖片的高度
lH : 0, //縮略圖容器佔用的高度
cPadding : 10, //(預先設置)-容器的填充值
itemW : 60, //(預先設置)-縮略圖的寬度
itemH : 50, //(預先設置)-縮略圖的高度
itemPad : 2, //(預先設置)-圖片在水平方向佔有的空間最小值，後面會自動計算修改
lineNum : 1, //(預先設置)-用幾行來顯示縮略圖
lineSpace : 10, //(預先設置)-行之間的間隔
showCount : 5, //(預先設置)-每行顯示的縮略圖個數，需要根據容器寬度和空白邊計算出來。
pageCount : 4, //(自動計算)-總頁數
itemCount : 0, //(自動計算)-總共有多少張圖片需要顯示
itemIndex : 0, //(自動計算)-當前顯示的圖片
pageIndex : 0, //(自動計算)-當前頁索引（需要默認值0）
oContainer : "oContainer" + suffix, //(預先設置)-外部容器的ID
pContainer : "pContainer" + suffix, //(預先設置)-顯示大圖片的容器的ID
iContainer : "iContainer" + suffix, //(預先設置)-顯示大圖片img標籤的ID
lContainer : "lContainer" + suffix, //(預先設置)-顯示列表的容器的ID
tContainer : "tContainer" + suffix, //(預先設置)-顯示圖片標題的容器的ID
xContainer : "xContainer" + suffix, //(預先設置)-顯示圖片頁數的容器的ID
titleH : 30, //顯示圖片標題的DIV高度
pageLineH : 20, //顯示頁碼的DIV的高度
preImage : "images/toPrePageNormal.png", //(預先設置)-顯示爲上一頁的圖片
nextImage : "images/toNextPageNormal.png", //(預先設置)-顯示爲下一頁的圖片
preImageB : "images/toPrePageOver.png", //(預先設置)-顯示爲上一頁的圖片
nextImageB : "images/toNextPageOver.png", //(預先設置)-顯示爲下一頁的圖片
preContainer : "toPrePageImage" + suffix, //(預先設置)-
nextContainer: "toNextPageImage" + suffix, //(預先設置)-
btnW : 25, //(預先設置)-按鈕的寬度，高度使用itemH
linkH : 35, //顯示連接欄的高度
linkContainer : "linkContainer" + suffix,
adH : 25, //廣告欄顯示的高度
adContainer : "adContainer" + suffix,
/************************************************/
picAddress : "http://www.youdomain.com/showimage?id=", //爲了不給客戶端真實的圖片URL，這裏修改爲支持動態圖片數據
loadingFlag : true, //顯示加載過程爲Loading圖片
loadImageContainer:"loadImageContainer",
loadImage : "images/loading.gif", //(預先設置)-加載前顯示的加載動畫
loadingH : 16, //加載動畫的高度
loadingW : 16 //加載動畫的寬度
}
/*
* 各個DIV的顏色配置信息
*/
var PicColor ={
ocBgColor :"#F4F4F4", //最外層DIV的背景顏色
icBgColor :"", //顯示圖片的DIV的背景顏色
lcBgColor :"#F4F4F4", //包含縮略圖列表的DIV的顏色
socBgColor :"#FCFC00", //包含縮略圖的DIV的顏色
scBgColorOver :"#F4F4F4", //鼠標移到縮略圖上包含縮略圖的DIV的背景顏色
scBgColorOut :"#F4F4F4", //縮略圖所在容器的背景顏色
scBorderColorOver :"#66FF99", //鼠標移到縮略圖上圖片的上下邊框的顏色
bcBgCorlor :"#F4F4F4", //按鈕容器的背景
selectedcBgCorlor :"#FF8C00", //選中縮略圖的背景顏色
imageBorderCorlor :"#669900" //正常縮略圖的邊框顏色
}
/********************************************************************************/
//定義功能跳轉地址
var LinkAddress = new Array();
LinkAddress[0] ={title:"掰它",url:"4.htm"}
LinkAddress[1] ={title:"查看評論",url:"5.htm"}
LinkAddress[2] ={title:"推薦給好友",url:"6.htm"}
//定義文字廣告列表
var TxtAdList = new Array();
TxtAdList[0] = { title:"好吃你就多吃點",url:"1.htm" }
TxtAdList[1] = { title:"聯想天驕P4暑假大促銷",url:"2.htm" }
TxtAdList[2] = { title:"是男人就應該狠點",url:"3.htm" }
TxtAdList[3] = { title:"惠普PC熱賣",url:"" }
//縮略圖和真實圖片的地址
//定義圖片的地址數組
var PicArr = new Array();
PicArr[0] = {id:15303,title:"測試圖片_1"}
PicArr[1] = {id:15304,title:"測試圖片_2"}
PicArr[2] = {id:15305,title:"測試圖片_3"}
PicArr[3] = {id:15306,title:"測試圖片_4"}
PicArr[4] = {id:15307,title:"測試圖片_5"}
PicArr[5] = {id:15206,title:"測試圖片_6"}
PicArr[6] = {id:15207,title:"測試圖片_7"}
PicArr[7] = {id:15308,title:"測試圖片_8"}
PicArr[8] = {id:15309,title:"測試圖片_9"}
PicArr[9] = {id:15310,title:"測試圖片_10"}
PicArr[10] = {id:15311,title:"測試圖片_11"}
PicArr[11] = {id:15312,title:"測試圖片_12"}
/*****************************************************************************/
/**********************以下的代碼都不需要修改*********************************/
/*
* 預加載圖片數組，其中每個元素都是Image對象
*/
var cacheImageObj = new Array();
/*
* 全部變量
*/
var selectedImage;
var bigImageObject;
//alert( selectedImage);
/*
* 在指定的容器中顯示數組的內容
* @container 容器的ID
* @arr 內容數組
* align 對齊方式
*/
function showMessage( container,arr,align){
if( arr.length > 0 ){
var c = document.getElementById(container);
c.style.fontSize = "12px";
c.style.textAlign = align;
var s ="";
var i = 0;
for( ;i<arr.length-1;i++ ){
s = s + "<a href=/"" + arr[i].url + "/" target=/"_blank/">"+ arr[i].title + "</a> | " ;
}
s = s + "<a href=/"" + arr[i].url + "/">"+ arr[i].title + "</a>";
c.innerHTML = s;
}
}
function showTitle( container,title,align){
var c = document.getElementById(container);
c.style.fontSize = "14px";
c.style.textAlign = align;
c.innerHTML = title + " ";
}
function showPageCode( container,align){
var c = document.getElementById(container);
c.style.fontSize = "12px";
c.style.textAlign = align;
var startPos = (Config.pageIndex -1) * Config.showCount + 1;
var endPos = startPos + Config.showCount -1;
var s ="["+ Config.pageIndex + "] / " + "["+ Config.pageCount + "] " + startPos + " - " + endPos + " / " + Config.itemCount;
c.innerHTML = s;
}
/*
* 根據縮略圖獲取原圖的地址
*/
function getSourcePicture( url )
{
var i = url.indexOf("&");
if( i > 0 ){
return url.substr(0,i);
}else{
return url;
}
}
function showLoading( sourceImage){
sourceImage.src = Config.loadImage;
sourceImage.style.display ="block";
var parentNode = sourceImage.parentNode;
var iLeft = iTop = cH = cW = 0;
cH = parentNode.style.height;
cH = parseInt(cH.substr(0,cH.length-2 ));
cW = parentNode.style.width;
cW = parseInt(cW.substr(0,cW.length-2 ));
if( cH >= Config.loadingH){
iTop = ( cH - Config.loadingH)/2;
sourceImage.style.height = Config.loadingH + "px";
}else{
sourceImage.style.height = cH + "px";;
}
if( cW >= Config.loadingW ){
iLeft = ( cW - Config.loadingW)/2 ;
sourceImage.style.width = Config.loadingW + "px";
}else{
sourceImage.style.width = cW + "px";
}
sourceImage.style.position="absolute";
sourceImage.style.top = iTop + "px";
sourceImage.style.left = iLeft + "px";
}
/*
* 預加載一個圖片對象，並返回該對象
* @imgUrl 圖片的地址
*/
function CacheImage(imgUrl){
var imgObj = new Image();
imgObj.src = imgUrl;
return imgObj;
}
/*
* 檢測指定的預加載圖片是否已經加載完成（100毫秒檢測一次）
* 用圖片的src屬下做爲緩存圖片的關聯數組的下標
* @sourceImage 顯示圖片的Img標籤的ID
* @id 圖片的地址
*/
function loadImage( sourceImage,id ){
if( cacheImageObj[id].complete != true ){
setTimeout("loadImage('" + sourceImage + "','"+ id + "')",100);
}else{
var sImage = document.getElementById( sourceImage );
//設置圖片的填充padding爲2
sImage.style.padding ="2px";
var c = sImage.parentNode;
var cH = c.style.height == ""? "200px" : c.style.height; //獲取容器的高度
var cW = c.style.width == ""? "200px" : c.style.width; //獲取容器的寬度
//去掉單位（px）再減去縮略圖佔用的高度 -4 是去掉圖片的padding
cH = parseInt(cH.substr(0,cH.length-2 )) -4;
cW = parseInt(cW.substr(0,cW.length-2 )) -4;
//容器的高度和寬度之比
cRadio = cH / cW;
/* 緩存圖片的高度和寬度*/
var oH = cacheImageObj[id].height;
var oW = cacheImageObj[id].width;
/* 圖片的高度和寬度之比*/
var oRadio = oH / oW;
//把已經緩存進來的圖片src設置爲顯示標籤的src
sImage.src = cacheImageObj[id].src;
//按比例設置圖片的高度和寬度
if( cRadio >= oRadio ){
if( oW > cW ){
sImage.width = cacheImageObj[id].width = cW;
sImage.height = cacheImageObj[id].height = cW * oRadio;
}else{
sImage.width = cacheImageObj[id].width;
sImage.height = cacheImageObj[id].height;
}
}else{
if( oH > cH ){
sImage.height = cacheImageObj[id].height = cH;
sImage.width = cacheImageObj[id].width = cH / oRadio;
}else{
sImage.width = cacheImageObj[id].width;
sImage.height = cacheImageObj[id].height;
}
}
var leftPos = (cW - cacheImageObj[id].width) /2;
var topPos = (cH - cacheImageObj[id].height) /2;
//relative absolute
sImage.style.position="absolute";
sImage.style.left = leftPos + "px";
sImage.style.top = topPos + "px";
if( sImage.previousSibling != null){
sImage.previousSibling.style.display = "none";
sImage.style.display = "block";
}
//設置小圖片的邊框
if( bigImageObject != sImage ){
//上一頁和下一頁圖片不加邊框
if( sImage.id == Config.preContainer || sImage.id == Config.nextContainer){
}else if( sImage != selectedImage ){
sImage.style.border = "1px solid " + PicColor.imageBorderCorlor;
}else{
sImage.style.border = "1px solid " + PicColor.socBgColor;
}
sImage.style.padding ="1px";
}
}
}
/*
* 把DIV容器(container)中的圖片（sourceImage）的地址修改爲src
* @sourceImage 顯示圖片的Img標籤的ID
* @id 圖片的地址
*/
function changeImage( sourceImage,id){
var ls = sourceImage;
cacheImageObj[id] = CacheImage( id );
if( ls.previousSibling != null ){
ls.style.display ="none";
showLoading( ls.previousSibling );
}
//刪掉重建
if( ls == bigImageObject ){
var divNode = ls.parentNode;
divNode.removeChild( ls );
var imgNode=createImgNode( divNode,Config.iContainer,null,"none",null,null,null);
imgNode.style.border = "1px solid " + PicColor.imageBorderCorlor;
ls = bigImageObject = imgNode;
}
loadImage(ls["id"],id);
}
/*
* 動態生成一個DIV節點
*/
function createDivNode( parentNode,nodeId,position,iLeft,iTop,iHeight,iWidth,bgColor){
var divNode = document.createElement("div");
divNode.setAttribute("id", nodeId );
divNode.style.position = position;
divNode.style.left = iLeft + "px";
divNode.style.top = iTop + "px";
divNode.style.height = iHeight + "px";
divNode.style.width = iWidth + "px";
divNode.style.backgroundColor = bgColor;
parentNode.appendChild( divNode );
return divNode;
}
/*
* 動態生成一個Img節點
*/
function createImgNode( parentNode,nodeId,title,display,clk,over,out){
var imgNode = document.createElement("img");
imgNode.style.display = display;
imgNode.setAttribute("id", nodeId );
imgNode.setAttribute("title",title);
imgNode.onclick = clk;
imgNode.onmouseover = over;
imgNode.onmouseout = out;
parentNode.appendChild( imgNode );
return imgNode;
}
/*
* 初始化顯示圖片的各個界面元素的位置
*/
function initPhotoView(){
var c = document.getElementById( Config.oContainer );
//設置外部容器的高度和寬度
Config.lH = (Config.itemH + Config.lineSpace ) * Config.lineNum + Config.lineSpace;
var ocH = Config.cH + Config.titleH + Config.pageLineH + Config.linkH + Config.adH + Config.lH +
Config.cPadding * 2 ;
var ocW = Config.cW + Config.cPadding * 2;
c.style.height = ocH + "px";
c.style.width = ocW + "px";
//設置外部容器的背景顏色
c.style.backgroundColor = PicColor.ocBgColor;
/*
* 計算每個縮略圖的空白邊和每行可以放置的個數,如果只有一行，則兩個圖片按鈕都出現在這一行，
* 如果有多行，則上一頁按鈕出現在第一行的第一位置，下一頁按鈕出現在最後一行的最後位置
*/
var btnW = Config.btnW * 2;
Config.showCount = Math.floor( (Config.cW - btnW ) / ( Config.itemW + Config.itemPad) );
Config.itemPad = ( Config.cW - Config.itemW * Config.showCount - btnW -2 ) / Config.showCount;
Config.itemCount = PicArr.length;
Config.pageCount = Math.ceil(PicArr.length / Config.showCount );
//設置圖片容器的位置
var iLeft = Config.cPadding;
var iTop = Config.cPadding;
var iWidth = Config.cW -2;
var iHeight = Config.cH;
var divNode=createDivNode( c,Config.pContainer,"absolute",iLeft,iTop,iHeight,iWidth,PicColor.icBgColor);
createImgNode( divNode,Config.loadImageContainer + loadingIndex++,"loading...","none",null,null,null);
var imgNode=createImgNode( divNode,Config.iContainer,null,"block",null,null,null);
imgNode.style.border = "1px solid " + PicColor.imageBorderCorlor;
bigImageObject = imgNode;
//設置標題顯示欄的位置 padding: 5px;
iTop = Config.cPadding + Config.cH + 5;
iHeight = Config.titleH - 5;
createDivNode( c,Config.tContainer,"absolute",iLeft,iTop ,iHeight,iWidth,"");
//設置頁碼顯示欄的位置
iTop = iTop + Config.titleH - 5;
iHeight = Config.pageLineH;
createDivNode( c,Config.xContainer,"absolute",iLeft,iTop,iHeight,iWidth,"");
//設置縮略圖列表的位置
iTop = iTop + Config.pageLineH;
iHeight = Config.lH -2; //2是邊框的
var lNode = createDivNode( c,Config.lContainer,"absolute",iLeft,iTop,iHeight,iWidth,PicColor.lcBgColor);
lNode.style.border="1px solid #999999";
//創建連接欄 Config.linkH
iTop = iTop + Config.lH + 12;
iHeight = Config.linkH -10;
createDivNode( c,Config.linkContainer,"absolute",iLeft,iTop,iHeight,Config.cW - 2,"");
showMessage( Config.linkContainer,LinkAddress,"center");
//顯示廣告欄
iTop = iTop + Config.linkH -10;
iHeight = Config.adH;
createDivNode( c,Config.adContainer,"absolute",iLeft,iTop,iHeight,iWidth,"");
showMessage( Config.adContainer,TxtAdList,"center");
if( Config.itemCount ==0 ){
showTitle( Config.xContainer,"<span style=/"color:#FF0000;/">提示:豆子還沒有添加圖片或者圖片已經被刪除</span>","center");
return;
}
createPage("N");
showPageCode(Config.xContainer,"center");
}
/*
* 生成一頁的縮略圖
* @page "P"-上一頁 or "N"-下一頁
*/
function createPage( page ){
if( page =="P"){ /* 顯示上一頁 */
if( Config.pageIndex <= 1 ){
return;
}else{
Config.pageIndex = Config.pageIndex - Config.lineNum;
}
}else if( page =="N"){ /* 顯示下一頁 */
if( (Config.pageIndex+Config.lineNum-1) >= Config.pageCount ){
return;
}else{
Config.pageIndex = Config.pageIndex == 0?1:Config.pageIndex+ Config.lineNum;
}
}
//獲取列表容器對象，並刪除全部的子節點
var l = document.getElementById( Config.lContainer );
while( l.hasChildNodes() ){
l.removeChild( l.firstChild);
}
//動態生成圖片列表<div id="smallPictureContainer-1"><img id="smallPicture-1" src=../></div>
//生成上一頁的按鈕容器和圖片
var preBtn =
createDivNode(l,"c"+Config.preContainer,"absolute",0,Config.lineSpace,Config.itemH,Config.btnW,PicColor.bcBgCorlor);
if( Config.pageIndex > 1 ){ /* 上一頁不可見 */
var imgNode = createImgNode(preBtn,Config.preContainer,"顯示上一頁","block",changePage,onPreImageOver,onPreImageOut);
changeImage( imgNode,Config.preImage);
}
Config.itemIndex = ( Config.pageIndex -1) * Config.showCount;
var pictureIndex = 0;
for( var i=0;i< Config.lineNum; i++ ){
for( var k = 1; k <= Config.showCount; k++ ){
pictureIndex = Config.showCount * i + ( Config.pageIndex -1) * Config.showCount + k;
if( pictureIndex <= Config.itemCount){
//增加一個div節點
var divNode = document.createElement("div");
divNode.setAttribute("id", "container_small_picture_" + pictureIndex );
divNode.style.position="absolute"; //relative absolute
divNode.style.left = (Config.itemW + Config.itemPad) * (k-1) + Config.btnW + Config.itemPad / 2
+ "px";
divNode.style.top = (Config.itemH + Config.lineSpace )* i + Config.lineSpace + "px";
divNode.style.height = Config.itemH - 4 + "px";
divNode.style.width = Config.itemW - 4 + "px";
divNode.style.backgroundColor = PicColor.lcBgColor;
divNode.style.border ="2px solid " + PicColor.lcBgColor;
//在DIV中增加一個顯示Loading動畫的Img節點
createImgNode( divNode,Config.loadImageContainer +
loadingIndex++,"loading...","none",null,null,null);
//在div節點中增加一個img節點
var imgNode = document.createElement("img");
imgNode.setAttribute("id", "small_picture_" + pictureIndex );
imgNode.setAttribute("title", PicArr[pictureIndex-1].title );
imgNode.onclick = imageOnClick;
imgNode.onmouseover = imageOnMouseOver;
imgNode.onmouseout = imageOnMouseOut;
//把這個容器節點的引用保存到數組PicArr相對應的對象中
PicArr[pictureIndex-1].container = imgNode;
divNode.appendChild( imgNode );
l.appendChild( divNode );
changeImage(imgNode,Config.picAddress + PicArr[pictureIndex-1].id + "&w=" + Config.itemW );
}
}
}
var iLeft = ( Config.itemPad + Config.itemW ) * Config.showCount + Config.btnW;
var iTop = ( Config.lineSpace + Config.itemH ) * ( Config.lineNum -1 ) + Config.lineSpace;
var nextBtn = createDivNode(l,"c"+
Config.nextContainer,"absolute",iLeft,iTop,Config.itemH,Config.btnW,PicColor.bcBgCorlor);
if( (Config.pageIndex+Config.lineNum-1) < Config.pageCount ){ /* 下一頁不可見 */
var imgNextNode = createImgNode(nextBtn,Config.nextContainer,"顯示下一頁","block",changePage,onNextImageOver,onNextImageOut );
changeImage( imgNextNode,Config.nextImage);
}
//顯示第一張圖片
changeImage( bigImageObject,Config.picAddress + PicArr[Config.itemIndex].id );
//設置第一個爲選中狀態
selectedImage = PicArr[Config.itemIndex].container;
selectedImage.style.border = "1px solid " + PicColor.socBgColor;
selectedImage.parentNode.style.border = "2px solid " + PicColor.selectedcBgCorlor;
//顯示第一張圖片的標題
showTitle( Config.tContainer,PicArr[Config.itemIndex].title,"center");
}
/*
* 處理上一頁和下一頁的點擊翻頁動作
*/
function changePage(){
if( this["id"] == Config.preContainer ){
createPage("P");
}else{
createPage("N");
}
showPageCode(Config.xContainer,"center");
}
/*
* 單擊圖片的縮略圖時把其對應的大圖片加載到指定的位置顯示
*/
function imageOnClick(){
if( this == selectedImage ){
return;
}else if( selectedImage != undefined ){
selectedImage.parentNode.style.border = "2px solid " + PicColor.lcBgColor;
selectedImage.style.border = "1px solid "+ PicColor.imageBorderCorlor;
}
this.parentNode.style.border = "2px solid " + PicColor.selectedcBgCorlor;
selectedImage = this;
selectedImage.style.border = "1px solid "+ PicColor.socBgColor;
changeImage( bigImageObject,getSourcePicture(this["src"]));
showTitle( Config.tContainer,this.title,"center");
}
/*
* 鼠標移到縮略圖上面時增加的顯示效果
*/
function imageOnMouseOver(){
this.parentNode.style.backgroundColor = PicColor.scBorderColorOver;
}
/*
* 鼠標移出縮略圖時恢復原來的樣式
*/
function imageOnMouseOut(){
this.parentNode.style.backgroundColor = PicColor.scBgColorOut;
}
/*
* 翻頁圖片效果
*/
function onPreImageOver(){
this["src"] = Config.preImageB;
}
function onPreImageOut(){
this["src"] = Config.preImage;
}
function onNextImageOver(){
this["src"] = Config.nextImageB;
}
function onNextImageOut(){
this["src"] = Config.nextImage;
}
document.write("<div id=/"" + Config.oContainer + "/" style=/"position:relative;left:0px;top:0px;height:450px;width:400px;/"></div>");
initPhotoView();
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/trampou/archive/2007/04/24/1581118.aspx
