急急急急,,看网址,求像百度浏览图片的功能! http://hi.baidu.com/kuyou8/album/item/3e02aceafda786d8d439c949.html#IMG=7ffb340fe46c86216159f33c最好每一张图片,都有在旁边显示,不同的说明文字! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 正好这两天写了相册,就照着百度做的。自己写的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号为键,取到这个图片的对象,然后所有属性就可以设置了 http://www.scriptlover.com/controls/main.html 大家喜欢用什么工具写javascript??? js如何传递这样的值 实在没办法了,再发求助帖 一个简单的清空问题 js页面打印的问题 文本框中的value值里有双引号该怎么办啊 如何通过点击一个表格中的按钮,将在同一行另一表格中的内容读出,并将取得的值传给相应的处理页面??急急!! 一个问题!!!相信你也回遇见 (菜鸟一问~!)怎么生成 *.js文件并在jsp中直接调用*.js文件? 非常棘手的问题,关于body的onUnload事件,高分恳请帮助<br> 发一下js文件源码,请教其中的一行代码,谢谢。 急:现在哪里可以下载JSVM优化的Ext for jsvm啊
自己写的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号为键,取到这个图片的对象,然后所有属性就可以设置了