模仿--凤凰网图片集

凤凰网图片集:
http://news.ifeng.com/photo/bigpicture/519_slide.shtml
附件tpj.rar为实现:

数据js--photojsondata.js:
var photojsondata={'title':'山东馆形如海岱交融 演绎齐鲁青未了','summary':'','pubdate':'2010-03-24 15:54:16','contents':[{'title':'外观效','summary':'山东馆外观效果图','img_b':'http://pic.vodone.com/news/images/2010/3/24/20103241269417299141_596.jpg','img_s':'http://pic.vodone.com/news/images/2010/3/24/20103241269417299141_596.jpg','orderid':2},{'title':'鲁班锁','summary':'山东馆鲁班锁效果图','img_b':'http://pic.vodone.com/news/images/2010/3/24/20103241269417300516_596.jpg','img_s':'http://pic.vodone.com/news/images/2010/3/24/20103241269417300516_596.jpg','orderid':3},{'title':'城市窗口','summary':'山东馆“城市窗口”效果图','img_b':'http://pic.vodone.com/news/images/2010/3/24/20103241269417307344_596.jpg','img_s':'http://pic.vodone.com/news/images/2010/3/24/20103241269417307344_596.jpg','orderid':4},{'title':'名人','summary':'山东馆序厅“智慧长廊”中“名人”展区效果图','img_b':'http://pic.vodone.com/news/images/2010/3/24/20103241269417302828_596.jpg','img_s':'http://pic.vodone.com/news/images/2010/3/24/20103241269417302828_596.jpg','orderid':5},{'title':'智慧长廊','summary':'山东馆序厅“智慧长廊”中“名物”展区效果图','img_b':'http://pic.vodone.com/news/images/2010/3/24/20103241269417296578_596.jpg','img_s':'http://pic.vodone.com/news/images/2010/3/24/20103241269417296578_596.jpg','orderid':6}]};
功能代码--SlideHelper.js摘自凤凰网并根据需要改动:
SlideHelper.js
var SlideHelper = {
"albumTitle":null,
"albumSummary":null,
"albumPubdate":null,
"ImgBox":null,
"ImgObj":null,
"ThumbBox":null,
"MemoBox":null,
"CurNumBox":null,
"TotalNumBox":null,
"PreBtn":null,
"NextBtn":null,
"PrePageBtn":null,
"NextPageBtn":null,
"Data":[],
"NextLink":'',
"ThumbExt":'thumb_170x114_',

"CurrentIndex":0,
"CurrentPage":-1,
"CurrentThumb":null,
"ThumbViewCount":5,
"ShowTimeoutId":null,
"PreDocUrl":'',

"Init":function(imgjson__)
{
SlideHelper.Data = imgjson__.contents;
SlideHelper.TotalNumBox.innerHTML = SlideHelper.Data.length;
if(SlideHelper.PreBtn) SlideHelper.PreBtn.onclick = SlideHelper.Pre;
if(SlideHelper.NextBtn) SlideHelper.NextBtn.onclick = SlideHelper.Next;
if(SlideHelper.albumTitle) SlideHelper.albumTitle.innerHTML=imgjson__.title;
if(SlideHelper.albumSummary) SlideHelper.albumSummary.innerHTML=imgjson__.summary;
if(SlideHelper.albumPubdate) SlideHelper.albumPubdate.innerHTML=imgjson__.pubdate;

if(SlideHelper.PrePageBtn) SlideHelper.PrePageBtn.onclick = SlideHelper.PrePage;
if(SlideHelper.NextPageBtn) SlideHelper.NextPageBtn.onclick = SlideHelper.NextPage;

var curIndex = GetArgsFromHref(window.location.href,"index");
if(curIndex=='')
{
curIndex = 0;
}
SlideHelper.PreDocUrl = decodeURIComponent(GetArgsFromHref(window.location.href,"pre"));
SlideHelper.CurrentIndex = parseInt(curIndex);
SlideHelper.RenderImg();
},
"RenderImg":function()
{
if(SlideHelper.CurrentIndex<SlideHelper.Data.length)
{

var item = SlideHelper.Data[SlideHelper.CurrentIndex];

if(SlideHelper.ImgObj==null)
{
SlideHelper.ImgBox.innerHTML = '<img  id="bigImage" style="filter: revealTrans(Duration=4.0, Transition=23);" onmousemove="SlideHelper.imageonmousemove(event)" onclick="SlideHelper.imageonclick(event);" onload="SlideHelper.ChangeImg();" src="'+ item.img_b +'" />';
SlideHelper.ImgObj = $('bigImage');
}
else
{
SlideHelper.ImgObj.style.visibility ="hidden";
SlideHelper.ShowTimeoutId = setTimeout("SlideHelper.ShowImg()",1500);//确保图片在没有执行onload情况下也能显示
SlideHelper.ImgObj.src = item.img_b;
}

var ext='';
if(item.targetlink!="")
ext = '';
SlideHelper.MemoBox.innerHTML=item.summary + ext;
//SlideHelper.CurNumBox.innerHTML = SlideHelper.CurrentIndex+1; 当前第几页
if(SlideHelper.NextBtn){
if(SlideHelper.CurrentIndex==SlideHelper.Data.length-1)
{
SlideHelper.NextBtn.onclick = function()
{
if(SlideHelper.NextLink!='')
window.location.href = SlideHelper.NextLink ;
};
}
}
if(SlideHelper.PreBtn){
if(SlideHelper.CurrentIndex==0)
SlideHelper.PreBtn.style.display="none";
else
SlideHelper.PreBtn.style.display="";
}

//设置小图
SlideHelper.SetThumb();
}
},
"SetCurrent":function()
{
var params = window.location.href.split("?");
window.location.href=params[0] + "?index=" + SlideHelper.CurrentIndex + "&pre=" + encodeURIComponent(SlideHelper.PreDocUrl);

},
"Set":function(index)
{
SlideHelper.CurrentIndex = index;
SlideHelper.SetCurrent();
},
"Pre":function()
{
if(SlideHelper.CurrentIndex>0)
{
SlideHelper.CurrentIndex--;
SlideHelper.SetCurrent();
}
},
"Next":function()
{
if(SlideHelper.CurrentIndex<SlideHelper.Data.length-1)
{
SlideHelper.CurrentIndex++;
SlideHelper.SetCurrent();
}
},
"SetThumb":function()
{
var curpage = Math.floor(SlideHelper.CurrentIndex/SlideHelper.ThumbViewCount);
if(SlideHelper.CurrentPage==curpage){
//if(SlideHelper.CurrentThumb)
// SlideHelper.CurrentThumb.className = '';
SlideHelper.ClearCurrent();
$('thumb_li_' + SlideHelper.CurrentIndex).className ="cur";
}
else
{
SlideHelper.SetPage(curpage);
SlideHelper.CurrentPage=curpage;
}
//SlideHelper.CurrentThumb = $('thumb_li_' + SlideHelper.CurrentIndex);
},
"PrePage":function()
{
if(SlideHelper.CurrentPage>0)
{
SlideHelper.CurrentPage--;
SlideHelper.SetPage(SlideHelper.CurrentPage);
}
},
"NextPage":function()
{
if(SlideHelper.CurrentPage<Math.floor((SlideHelper.Data.length-1)/SlideHelper.ThumbViewCount))
{
SlideHelper.CurrentPage++;
SlideHelper.SetPage(SlideHelper.CurrentPage);
}
},
"SetPage":function(curpage)
{
var s=''
var startIndex = curpage*SlideHelper.ThumbViewCount;
var endIndex = (curpage+1)*SlideHelper.ThumbViewCount;
endIndex = endIndex<SlideHelper.Data.length-1?endIndex:SlideHelper.Data.length-1;
for(var i=startIndex;i<=endIndex;i++)
{
var curExt = '';
if(i==SlideHelper.CurrentIndex)
curExt=' class="cur" ';
var thumburl =SlideHelper.Data[i].img_s;
s+='<li id="thumb_li_'+ i +'"  '+ curExt +'><a href="javascript:SlideHelper.Set('+ i +');"><img src="'+ thumburl +'" /></a></li>';
}
SlideHelper.ThumbBox.innerHTML = s;
},
"_GetThumbUrl":function(bigimgurl)
{
var pos = bigimgurl.lastIndexOf("/");
var thumburl = bigimgurl.substring(0,pos+1) + SlideHelper.ThumbExt + bigimgurl.substring(pos+1);
return thumburl;
},
"ShowImg":function()
{
SlideHelper.ImgObj.style.visibility="visible";
SlideHelper.ShowTimeoutId=null;
},
"ClearCurrent":function()
{
var lis = SlideHelper.ThumbBox.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
lis[i].className = "";
}
},
"imageonmousemove":function(evnt)
{
var photopos = SlideHelper.getpos(SlideHelper.ImgObj);
var obj = SlideHelper.ImgObj;
if (evnt)
{
//nx = (parseInt(evnt.clientX)-photopos2.left) / $("bigImage").width;
nx = (parseInt(evnt.clientX)-photopos.left) / SlideHelper.ImgObj.width;
if((nx>=0.5))
{
obj.style.cursor = "url("+"./images/right.cur"+"),auto";
if(SlideHelper.CurrentIndex==SlideHelper.Data.length-1 && SlideHelper.NextLink!='')
obj.title = "点击浏览下一组>>";
else
obj.title = "点击浏览下一张>>";
}

if ( nx<0.5)
{
obj.style.cursor = "url("+"./images/left.cur"+"),auto";
obj.title = "<<点击浏览上一张";
}
}
},
"imageonclick":function(evnt)
{
var photopos = SlideHelper.getpos(SlideHelper.ImgObj);
var obj = SlideHelper.ImgObj;
if (evnt)
{
nx = (parseInt(evnt.clientX)-photopos.left) / SlideHelper.ImgObj.width;
if(nx>=0.5)
{
if(SlideHelper.CurrentIndex==SlideHelper.Data.length-1)
{
var preurl = window.location.href.split("?")[0];
if(GetArgsFromHref(window.location.href,"index")!="")
preurl += "?index=" + GetArgsFromHref(window.location.href,"index");
window.location.href = SlideHelper.NextLink + "?index=0&pre=" + encodeURIComponent(preurl);

}
else
SlideHelper.Next();
}
else if (SlideHelper.CurrentIndex>0 && nx<0.5)
{
SlideHelper.Pre();
}
else if(SlideHelper.CurrentIndex==0)
{
if(SlideHelper.PreDocUrl!='')
{
window.location.href = SlideHelper.PreDocUrl;
}
}
}
},
"getpos":function(element)
{
        if ( arguments.length != 1 || element == null )
        {
               return null;
        }
        var elmt = element;
        var offsetTop = elmt.offsetTop;
        var offsetLeft = elmt.offsetLeft;
        var offsetWidth = elmt.offsetWidth;
        var offsetHeight = elmt.offsetHeight;
        while( elmt = elmt.offsetParent )
        {
                if ( elmt.style.position == 'absolute'
//              || elmt.style.position == 'relative'
                || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) )
                {
                        break;
                }
                offsetTop += elmt.offsetTop;
                offsetLeft += elmt.offsetLeft;
        }
        return {top:offsetTop, left:offsetLeft, right:offsetWidth+offsetLeft, bottom:offsetHeight+offsetTop };
},
/*
切换图片时图片幻灯展示的效果
*/
"ChangeImg":function()
{
if(SlideHelper.ShowTimeoutId)
{
clearTimeout(SlideHelper.ShowTimeoutId);

var transition = 12;//图片切换时渐变方式 1－－23
var tranSpeed = 0.5;//图片切换渐变速度。 值越小速度越快
var oImg = SlideHelper.ImgObj;
if(!oImg) return;
if (document.all){
oImg.filters.revealTrans.apply();
}
if (document.all)
{
if(!this.tranRandom) oImg.filters.revealTrans.transition = transition;
oImg.style.visibility = "visible";
oImg.style.display ="";
oImg.filters.revealTrans.play(tranSpeed);

}
else
{
oImg.style.visibility = "visible";
}
}
}

};

/*
　　*函数功能:从href获得参数
　　*sArgName:arg1, arg2
　　*return: the value of arg. d, re
　　*/
　　function GetArgsFromHref(sHref, sArgName)
　　{
　　var args = sHref.split("?");

　　var retval = "";
　　if(args[0] == sHref) /*参数为空*/
　　{
　　 return retval; /*无需做任何处理*/
　　}
　　var str = args[1];
　　args = str.split("&");
　　for(var i = 0; i < args.length; i ++)
　　{
　　str = args[i];
　　var arg = str.split("=");
　　if(arg.length <= 1) continue;
　　if(arg[0] == sArgName) retval = arg[1];
　　}
　　return retval;
　　}

function $(el)
{
if(!el)
{
return null;
}
else if(typeof el=='string')
{
return document.getElementById(el);
}
else if(typeof el=='object')
{
return el;
}
}

window.onload = function()
{
SlideHelper.ImgBox=$('tpj2_img');
SlideHelper.ThumbBox=$('thumbimg');
SlideHelper.CurNumBox=$('curImgNumBox');
SlideHelper.TotalNumBox=$('TotalImgNumBox');
SlideHelper.MemoBox =$('imgMemoBox');
//SlideHelper.PreBtn =$('pre1');
//SlideHelper.NextBtn =$('next1');
SlideHelper.PrePageBtn =$('tpj_pre');
SlideHelper.NextPageBtn =$('tpj_next');

SlideHelper.albumTitle =$('albumTitle');
SlideHelper.albumSummary =$('albumSummary');
SlideHelper.albumPubdate =$('albumPubdate');
SlideHelper.NextLink = '';

SlideHelper.Init(photojsondata);
}