电话客服
186-2323-2332
很多时候用到图片展示方式时都会想起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>