急急急急,,看网址,求像百度浏览图片的功能!

Question

http://hi.baidu.com/kuyou8/album/item/3e02aceafda786d8d439c949.html#IMG=7ffb340fe46c86216159f33c最好每一张图片,都有在旁边显示,不同的说明文字!

Answer 1

正好这两天写了相册，就照着百度做的。
自己写的js，不过是结合mootools做的，可以参考下
//图片类：
var PictureInfo = function(id,name,fileName,dsc,views,time,show)
{
    this.ID = id;
    this.Name = name;
    this.FileName = fileName;
    this.Dsc = dsc;
    this.Views = views;
    this.Time = time;
    this.Show = show;
}PictureInfo.prototype.getPicInfo = function(id,list)
{
    var result = null;
    list.each(function(l)
    {
        if(l.ID == id)
            result = l;
    });
    return result;
}PictureInfo.prototype.getPre = function(id,list)
{
    var result = null;
    list.each(function(l)
    {
        if(l.ID == id)
        {
            var pos = list.indexOf(l);
            if(pos>0)
            {
                result = list[pos-1];
            }
        }
    });
    return result;
}PictureInfo.prototype.getNext = function(id,list)
{
    var result = null;
    list.each(function(l)
    {
        if(l.ID == id)
        {
            var pos = list.indexOf(l);
            if(pos < list.length -1)
            {
                result = list[pos+1];
            }
        }
    });
    return result;
}
//图片左右箭头切换
function photoCursor(id,preCur,nextCur)
{
    this.id = id;
    this.Obj = $(id);
    this.Width = false;
    this.Left = false;
    this.Middle = false;
    this.PreCursor = preCur;
    this.NextCursor = nextCur;
    this.PreImg = false;
    this.NextImg = false;
    this.TargetImg = false;
    this.setPreAndNext = function(preImg,nextImg)
                         {
                             this.PreImg = preImg;
                             this.NextImg = nextImg;
                         }
    this.setPhotoProperty = function()
                            {
                                this.Width = this.Obj.offsetWidth;
                                this.Left = this.Obj.getLeft();
                                this.Middle = this.Left + (this.Width/2).toInt();
                            };
    this.setCursor = function(ev)
                     {
                         var myEvent = new Event(ev);
                         var MX = myEvent.client.x.toInt();
                         var MY = myEvent.client.y.toInt();
                         if(MX<=this.Middle)
                         {
                             this.TargetImg = this.PreImg;
                             if(this.TargetImg != null)
                             {
                                 this.Obj.setStyle('cursor',this.PreCursor);
                                 this.Obj.title = 'view the pre one';
                             }
                             else
                             {
                                 this.Obj.setStyle('cursor','default');
                                 this.Obj.title = 'here is the first';
                             }
                         }
                         else
                         {
                             this.TargetImg = this.NextImg;
                             if(this.TargetImg != null)
                             {
                                 this.Obj.setStyle('cursor',this.NextCursor);
                                 this.Obj.title = 'view the next one';
                             }
                             else
                             {
                                 this.Obj.setStyle('cursor','default');
                                 this.Obj.title = 'here is the last';
                             }
                         }
                     };
}//调用的地方
var photo;
window.addEvent('domready',function(ev){
        photo = new photoCursor('imgBrowse','url(img/pre.cur),auto','url(img/next.cur),auto');
        photo.setPreAndNext(PictureInfo.prototype.getPre($('hidPicId').value,pictureInfos),PictureInfo.prototype.getNext($('hidPicId').value,pictureInfos));
        $('imgBrowse').addEvent('load',function(){
            photo.setPhotoProperty();
            photo.setPreAndNext(PictureInfo.prototype.getPre($('hidPicId').value,pictureInfos),PictureInfo.prototype.getNext($('hidPicId').value,pictureInfos));
        });
        $('imgBrowse').addEvent('mousemove',function(ev){
            photo.setCursor(ev);
        });
        $('imgBrowse').addEvent('click',function(ev){
            if(photo.TargetImg != null)
                changePic(photo.TargetImg.ID);
        });
        photo.setPhotoProperty();
    });
//切换图片
function changePic(id)
{
    var info = PictureInfo.prototype.getPicInfo(id,pictureInfos);
    if(info == null)
        return;
    $('divCommentsList').innerHTML='';
    $('divCommentsList').style.display= 'none';
    $('hidPicId').value = info.ID;
    
    $('spanPicTitle').innerHTML = info.Name;
    
    $('spanPicTime').innerHTML = info.Time;
    
    $('imgBrowse').src = info.FileName;
    
    $('spanViews').innerHTML = info.Views;
    
    $('divPicDescr').innerHTML = info.Dsc;
    $('divPicDescr').style.display = 'block';
    
    $('spanDisplaying').innerHTML = (pictureInfos.indexOf(info)+1) +' of '+$('hidPicCount').value;
    
    ViewsAdd(info.ID);//浏览数加一
}大体思路就是页面加载时创建所有图片的对象，形成数组pictureInfos，顺序就是下面预览图的顺序。
切换图片时以图片的id号为键，取到这个图片的对象，然后所有属性就可以设置了

Answer 2

http://www.scriptlover.com/controls/main.html