模仿163/qq图片浏览效果js文件说明

function $(Id){if(typeof Id=="string")return document.getElementById(Id);return Id;}
function $s(Id,tag){return $(Id).getElementsByTagName(tag);}
function $abs(o){var p=new Object();p.x=o.offsetLeft;p.y=o.offsetTop;while(o=o.offsetParent){p.x+=o.offsetLeft;p.y+=o.offsetTop;}return p;}
/*
***缩略图片尺寸已经设好，为120x90，无法修改，并且注意大图和小图的名称就差“_s”，小图多“_s”。如大图为“12345.jpg”，则小图格式为“12345_s.jpg”
***一些要显示的信息，需要在小图片生成时自定义，如图片标题，图片上传时间等
参数介绍
     parentId：图片容器对象的ID，高度已经设置好，120px
     imgParentId：滚动图片容器对象的ID
     cfgDisplay：显示配置  {margin：图片间距,opacity：未获得焦点的图片透明度，为0-1间的数字,dpNum：每次显示的图片数量,totalID：显示总图片数量的容器ID}
     cfgArrowCopy：上下移动小图片的对象和拷贝对象的id，绑定事件用{pre:'',next:'',copy:''}
     cfgUpdate：为josn对象，为显示大图的属性和需要从小图片的自定义属性中更新显示内容的数组对象，其中数组对象内容为json对象，id对象为要更新的对象id，是设置innerHTML属性的，如下
       {bigImgId:'显示大图img对象的id',nowUrl:'显示当前大图片路径的a对象Id',dps:[{id:'显示对象的id',attr:'小图自定义属性的名称'},{id:'显示对象的id',attr:'小图自定义属性的名称',isPos:'布尔变量值，指示是否为图片位置'}...]}
     cfgImg：传递上下2张图片路径和鼠标在大图上移动时显示的光标对象路径{pre:'图片左边',next:'图片右边',cnext:'光标下',cpre:'光标上',cffnext:'光标Firefox下',cffpre:'光标火狐上',wait:'等待图片地址'}
     cfgLans：提示信息配置 {head:'滚动到头的提示信息',end:'滚动到尾的提示信息',first:'已经是第一张图片的提示',last:'已经是最后一张图片的提示',copy:['IE浏览器提示信息','非IE浏览器提示信息'],next:'下一张提示信息',pre:'上一张提示信息'}
*/
var ShowboImgLib=function(parentId,imgParentId,cfgDisplay,cfgArrowCopy,cfgUpdate,cfgImg,cfgLans){
  var me=this;//闭包对象
  //输出样式
  document.write('<style type="text/css">\n'
    +'#'+parentId+'{height:120px;overflow:hidden;}\n'
    +'#'+parentId+' div{float:left;}\n'
    +'#'+parentId+' div.left,#'+parentId+' div.right{height:100px;width:20px;background:url('+cfgImg.pre+') no-repeat left center;cursor:pointer;}\n'
    +'#'+parentId+' div.right{background-image:url('+cfgImg.next+');background-position:right center;}\n'
    +'#'+parentId+' #'+imgParentId+'{overflow:hidden;\height:100px;}\n'
    +'#'+parentId+' #'+imgParentId+' img{width:120px;height:90px;border:none;margin:4px '+cfgDisplay.margin+'px;cursor:pointer;filter:alpha(opacity='+(cfgDisplay.opacity*100)+');-moz-opacity:'+cfgDisplay.opacity+';opacity:'+cfgDisplay.opacity+';}\n'
    +'#'+parentId+' #'+imgParentId+' img.focus{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}\n'
    +'#'+parentId+' .summery{clear:both;text-align:right;line-height:20px;height:20px;width:100%;font-size:12px;}\n'
    +'#'+parentId+' .summery a{color:#cc6600;text-decoration:underline;display:inline;}\n'
    +'#'+parentId+' .summery a:hover{color:#600;text-decoration:none;}\n'
    +'#'+parentId+' .summery b{color:Red;}\n'
    +'.mnext{cursor:url('+cfgImg.cffnext+'),url('+cfgImg.cnext+'),auto;}\n'
    +'.mpre{cursor:url('+cfgImg.cffpre+'),url('+cfgImg.cpre+'),auto;}\n'
    +'#ShowboImgWait{display:none;position:absolute;z-index:100;left:0px;top:0px;}\n'
    +'</style>'); 
  //方法
  this.move=function(isLeft){
    if(isLeft){
      if(this.nowScrollLeft==0){alert(cfgLans.head);return false;}
      else  this.nowScrollLeft-=me.itemWidth;
    }
    else{
      if(this.nowScrollLeft>=this.demoWidth-this.itemWidth*cfgDisplay.dpNum)alert(cfgLans.end);
      else this.nowScrollLeft+=this.itemWidth;
    }
    this.imgParent.scrollLeft=this.nowScrollLeft;
  }
  this.Copy=function(){if(window.clipboardData){window.clipboardData.setData('text',me.img.src);alert(cfgLans.copy[0]);}else alert(cfgLans.copy[1]);;return false;}
  this.CheckPos=function(e,o){
     var x=e.offsetX||e.layerX;
    if(x>=(o.offsetWidth/2)){
    if(!o.className!='mnext')o.className="mnext";
      else o.style.cursor="n-resize";
      if(o.title!=cfgLans.next)o.title=cfgLans.next;
  }
  else{
    if(!o.className!='mpre')o.className="mpre";
    else o.style.cursor="pointer";
    if(o.title!=cfgLans.pre)o.title=cfgLans.pre;
  }
  }
  this.wait=function(isHide){
    if(isHide)this.waitImg.style.display='none';
    else{
      var p=$abs(this.img);
      this.waitImg.style.display='block';
      this.waitImg.style.left=(this.img.offsetWidth-this.waitImg.offsetWidth)/2+p.x+'px';
      this.waitImg.style.top=(this.img.offsetHeight-this.waitImg.offsetHeight)/2+p.y+'px';
    }
  }
  this.update=function(small){
    this.imgs[this.focusId].className='';//去掉原焦点图片样式
    this.wait();//显示等待加载图片图像
    var asyImg=new Image();//一步加载图片
    asyImg.onload=function(){me.img.src=this.src;me.wait(true);}
    asyImg.src=this.nowA.href=small.src.toLowerCase().replace('_s.','.');//更新的大图地址和大图链接对象
    var pos=parseInt(small.getAttribute('pos'));
    this.img.setAttribute('pos',pos);
    this.focusId=pos;
    small.className='focus';
    if(cfgUpdate.dps)for(var i=0;i<cfgUpdate.dps.length;i++)
      //注意这里设置显示对象时需要判断下是否为图片位置，如果是要+1，因为pos属性从0开始
      $(cfgUpdate.dps[i].id).innerHTML=cfgUpdate.dps[i].isPos?parseInt(small.getAttribute(cfgUpdate.dps[i].attr))+1:small.getAttribute(cfgUpdate.dps[i].attr);//跟新显示对象内容
    return pos;
  }
  this.setCT=function(o,isNext){
     var pos=-1;
     if(typeof isNext=='boolean'){
       pos=parseInt(o.getAttribute('pos'));
       if(isNext){
         if(pos+1>=this.itemNum){alert(cfgLans.last);return false;}
         else o=this.imgs[pos+1];
       }
       else{
         if(pos<1){alert(cfgLans.first);return false;}
         else o=this.imgs[pos-1];
       }
     }
     pos=this.update(o);
     pos++;
     var half=Math.ceil(cfgDisplay.dpNum/2);     
     if(pos<=half)this.nowScrollLeft=0;
     else if(pos>this.itemNum-half)this.nowScrollLeft=(this.itemNum-cfgDisplay.dpNum)*this.itemWidth;
     else this.nowScrollLeft=(pos-half)*this.itemWidth;
     this.imgParent.scrollLeft=this.nowScrollLeft;
  }
  this.init=function(){//初始化对象，注意要放到图片父亲容器的下面调用此函数，否则html dom对象未生成导致出错。或者放到window.onload事件中
    document.write('<img src="'+cfgImg.wait+'" id="ShowboImgWait"/>');
    this.parent=$(parentId);
    this.imgParent=$(imgParentId);
    this.img=$(cfgUpdate.bigImgId);
    this.total=$(cfgDisplay.totalID);
    this.nowA=$(cfgUpdate.nowUrl);
    this.waitImg=$('ShowboImgWait');
    
    this.img.setAttribute('pos','0');//大图片对应小图的位置，默认为0
    this.img.onmousemove=function(e){me.CheckPos(e||window.event,this);}//鼠标在大图上移动根据相对位置设置大图title及光标形状
    this.img.onclick=function(){me.setCT(this,this.className=='mnext');}//对大图片点击是判断是下一张还是下一张
    this.img.style.position='relative';//注意大图像的位置要设置为relative，这样在Firefox下才能使用offsetX获取相对位置
    this.itemWidth=120+cfgDisplay.margin*2;//要注意乘以2，因为有两边
    this.imgs=$s(this.imgParent,'img');
    this.itemNum=this.imgs.length;//存储多少张图片
    this.total.innerHTML=this.itemNum;//获取图片总数
    this.demoWidth=this.itemNum*this.itemWidth;//滚动总长度
    this.focusId=0;//默认第一张获取焦点
    this.nowScrollLeft=0;//默认滚动在左边
    this.imgParent.firstChild.style.width=this.demoWidth+'px';//设置滚动子容器的长度
    this.imgParent.style.width=this.itemWidth*cfgDisplay.dpNum+'px';//设置滚动容器的宽，以便实现滚动
    this.parent.style.width=this.itemWidth*cfgDisplay.dpNum+40+'px';//设置滚动父容器的宽，加上左右两边箭头的宽40
    for(var i=0;i<this.imgs.length;i++){this.imgs[i].onclick=function(){me.setCT(this);};this.imgs[i].setAttribute('pos',i);}//小图片点击事件处理
    //上下及拷贝地址对象事件绑定
    $(cfgArrowCopy.copy).onclick=function(){return me.Copy();}
    $(cfgArrowCopy.pre).onclick=function(){me.move(true);}
    $(cfgArrowCopy.next).onclick=function(){me.move();}
    var nowPicsrc=/\/([\d]+)\.(gif|bmp|jpg|png)/i.exec(this.img.src);//获取大图的文件名称，然后移动小图位置
    if(nowPicsrc){
      nowPicsrc=nowPicsrc[0].replace('.','_s.').substring(1);
      for(var i=0;i<this.itemNum;i++)if(this.imgs[i].src.indexOf(nowPicsrc)!=-1){
        this.setCT(this.imgs[i]);break;
      }
    }
  }
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <title>模仿163图片浏览效果，模仿qq图片浏览效果</title>
   <meta name="Keywords" content="javascript特效,图片浏览,模仿163,模仿qq"/>
   <meta name="Description" content="模仿qq/163的图片效果，可以指定显示的图片间距，每次显示的图片数量，当切换图片时，根据指定显示的图片张数，自动将当前图片定位到居中的位置。" />
    <style type="text/css">
    body{background:#fff;}
    </style> 
  </head>
  <body><h3>模仿qq/163的图片效果，可以指定显示的图片间距，每次显示的图片数量，当切换图片时，根据指定显示的图片张数，自动将当前图片定位到居中的位置。
  <br >在调用init()函数时会根据大图显示的图片自动滚动小图，让对应的小图自动居中。
  <br >显示图片的位置或者图片说明什么的，自己防止对象，使用图片类库时传递他们的id进入类库构造函数中即可。</h3><script type="text/javascript" src="libimg.js"></script> 
  <script type="text/javascript">
  //构造函数放在html代码结构前面，这样输出css，使结构在初始化时不会混乱
  var lib1=new ShowboImgLib('ShowboPhoto','ShowboImgs'
     ,{margin:2,opacity:0.4,dpNum:7,totalID:'ShowboPhotoTotal'}
     ,{pre:'ShowboLeft',next:'ShowboRight',copy:'ShowboCopy'}
     ,{bigImgId:'img',nowUrl:'ShowboPhotoUrl',dps:[{id:'dvTL',attr:'tl'},{id:'ShowboPhotoNow',attr:'pos',isPos:true}]}
     ,{pre:'left.gif',next:'right.gif'
     ,cpre:'pre.ani',cnext:'next.ani'
     ,cffpre:'pre.png',cffnext:'next.png'
     ,wait:'loading.gif'}
     ,{head:'已经移动到头！',end:'已经移动到尾！',first:'已经是第一张！',last:'已经是最后一张！',pre:'点击查看上一张',next:'点击查看下一张',copy:['复制图片地址成功！','浏览器不支持JavaScript复制地址，请打开原图手动复制浏览器地址栏图片地址！']})
  </script> 
  <div id="dvTL">alt</div>
  <img src="5.jpg" id="img" width="300" style="position:relative;"  />
      
    <div id="ShowboPhoto">
      <div class="left" onclick="lib.move(true)" id="ShowboLeft"></div>
      <div id="ShowboImgs"><div><img src="1.jpg" tl="第1张图片" class="focus" /><img src="err.gif" tl="第2张图片" /><img src="1.jpg"  tl="第3张图片"/><img src="err.gif" tl="第4张图片"/><img src="5_s.jpg"  tl="第5张图片"/><img src="err.gif"  tl="第6张图片"/><img src="1.jpg"  tl="第7张图片"/><img src="err.gif" tl="第8张图片"/></div></div>
      <div class="right"  id="ShowboRight"></div>
      <div class="summery">第<b id="ShowboPhotoNow">1</b>张 共<b id="ShowboPhotoTotal">8</b>张 <a href="#" id="ShowboPhotoUrl" target="_blank">原图</a> <a href="#"  id="ShowboCopy">复制地址</a></div></div>
      
  </body>
</html><script type="text/javascript">lib1.init();</script>