仿QQ空間圖片展示和百度圖片展示方式代碼

發(fā)布日期：[2012/11/9] 編輯：奇億廣州網(wǎng)站建設(shè)

很多時候用到圖片展示方式時都會想起QQ空間圖片或百度圖片的展示方式，鼠標(biāo)移動到圖片的左右側(cè)或上下部分會顯示上一張和下一張箭頭，點擊直接顯示上一張或下一張圖片。下面為你介紹種簡單即可實現(xiàn)這種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上。使大小能適應(yīng)#photo的大小,這樣使用#loading的時候會方便一點,第一張圖片unload的話也好處理一點。
* click事件的時候，可以根據(jù)pos考慮預(yù)加載一些圖片。
* ....
*/
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>