仿QQ空间图片展示和百度图片展示方式代码

发布日期：[2012/11/9] 编辑：奇亿广州网站建设

很多时候用到图片展示方式时都会想起QQ空间图片或百度图片的展示方式，鼠标移动到图片的左右侧或上下部分会显示上一张和下一张箭头，点击直接显示上一张或下一张图片。下面为你介绍种简单即可实现这种QQ空间图片展示或百度图片展示方式的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#xx{border:1px solid red;margin:0 auto;text-align:center;position:relative;}

</style>
</head>
<body>
<div id="xx">
<img src="UploadFile/201211985647955.jpg" id="photo" name="0" />
<div id="loading" style="display:none;">loading...</div>
</div>
<script type="text/＆#106avascript">

imgs = new Array('UploadFile/201211985647955.jpg','UploadFile/201211985647769.jpg');
/*
* 这里借用了img.name保存url在imgs里的位序.
* 事件可以考虑注册在#xx上。使大小能适应#photo的大小,这样使用#loading的时候会方便一点,第一张图片unload的话也好处理一点。
* click事件的时候，可以根据pos考虑预加载一些图片。
* ....
*/
document.getElementById('photo').＆#111nmousemove=function(e)
{
  var event=e||window.event; //
   var pos;
  if(event.offsetX!=undefined)
   pos=event.offsetX<this.offsetWidth/2?true:false;
  else if(event.layerX!=undefined)//
   pos=event.layerX<this.offsetWidth/2?true:false;
  //this.style.cursor=pos?'sw-resize':'nw-resize';
  //opera 9 好像不支持cursor:url，ie6:url要.cur文件,.gif换掉就好了。
  this.style.cursor=pos?'url(img/left.cur),auto':'url(img/right.cur),auto';

  this.＆#111nclick=function()
  {
   var next=(this.name-0+imgs.length+(pos?-1:1))%imgs.length;
   this.src=imgs[next];
   this.name=next;
   //
  }

}
document.getElementById('photo').onload=function()
{
  this.parentNode.style.width=this.width+"px";
  this.parentNode.style.height=this.height+"px";
}
</script>
</body>
</html>