<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>纵向的JS相册效果</title>
<style>
body {background:#fff;margin:20px 0;font:12px Verdana, Arial, Tahoma;text-align:center;vertical-align:middle;color:#FFFFFF}
.ShowMain{width: 770px; height: 480px;}
.ShowPhotoPanel{float: left; width: 660px; height: 480px;}
.PhotoNavPanel{float: right; width: 110px; height: 480px;}
.ShowPhoto{position:relative; overflow:hidden; width:660px; height: 470px; text-align:center; background: #000000;}
#ShowPhotoImg {cursor:pointer; display:block;border: none;}
.ShowPhotoBox{}
#ShowPhotoPrev{ position:absolute; left:0; top:0; width:50%; height:100%; display:block; background:url('skin/Showbg.png') repeat; cursor:url('skin/prev.cur'), auto;}
#ShowPhotoNext{ position:absolute; right:0; top:0; width:50%; height:100%; background:url('skin/Showbg.png') repeat; cursor:url('skin/next.cur'), auto;}
#PhotoLoading{ position:absolute; left:50%; top:50%; margin:-19px 0 0 -19px; width:37px; height:37px; background:url('skin/loading.gif') no-repeat 0 0;}
#gotop {cursor:pointer;display:block;}
#gobottom {cursor:pointer;display:block; margin-top:5px;}
.PhotoListBox{margin: 0;}
#PhotoLists{height:355px; overflow:hidden; width: 100%;}
#PhotoLists img{width:100px; height: 80px; cursor:pointer; display:block; margin-top:5px;}
#PhotoLists img.focus{border-style: solid; border-width:1px; border-color:#FE1F01; }
#ShowPhotoTitle{color: #000000;}
.NumContent{color: #000000;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript" src="photoshowlib.js" charset="UTF-8"></script>
<script type="text/javascript">
var MyLib1 = new ShowPhotoLib({ShowImgId: 'ShowPhotoImg', Width: 660, Height: 470},
{PhotoListsId:'PhotoLists', smallImg: 80, margin: 5, ShowNum: 5},
{TitleId: 'ShowPhotoTitle', NowSiteId: 'NowPhotoSite', PhotoTotalId: 'PhotoListTotal', PhotoUrlId:'PhotoUrl'},
{BigPrevId: 'ShowPhotoPrev', BigNextId: 'ShowPhotoNext', PrevId: 'gotop', NextId: 'gobottom', PreImg1: 'skin/gotop2.gif', PreImg2: 'skin/gotop.gif', NextImg1: 'skin/gobottom2.gif', NextImg2: 'skin/gobottom.gif'}, 'PhotoLoading', false);
</script>
<div id="ShowPhotoTitle">标题</div>
<div class="ShowMain">
<div class="ShowPhotoPanel">
<div class="ShowPhoto">
<div class="ShowPhotoBox"> <img src="images/03.jpg" width="660" height="470" border="0" id="ShowPhotoImg" rel="images/03.jpg" /> </div>
<div id="ShowPhotoPrev"></div>
<div id="ShowPhotoNext"></div>
<div id="PhotoLoading"></div>
</div>
</div>
<div class="PhotoNavPanel">
<img src="skin/gotop.gif" width="100" height="14" id="gotop" />
<div id="PhotoLists">
<div class="PhotoListBox">
<img src="images/1.jpg" rel="images/1.jpg" tl="第1张图" class="focus" />
<img src="images/2.jpg" rel="images/2.jpg" tl="第2张图" />
<img src="images/3.jpg" rel="images/3.jpg" tl="第3张图" />
<img src="images/4.jpg" rel="images/4.jpg" tl="第4张图" />
<img src="images/5.jpg" rel="images/5.jpg" tl="第5张图" />
<img src="images/6.jpg" rel="images/6.jpg" tl="第6张图" />
<img src="images/7.jpg" rel="images/7.jpg" tl="第7张图" />
<img src="images/8.jpg" rel="images/8.jpg" tl="第8张图" />
<img src="images/9.jpg" rel="images/9.jpg" tl="第9张图" />
<img src="images/10.jpg" rel="images/10.jpg" tl="第10张图" />
<img src="images/11.jpg" rel="images/11.jpg" tl="第11张图" />
<img src="images/12.jpg" rel="images/12.jpg" tl="第12张图" />
<img src="images/13.jpg" rel="images/13.jpg" tl="第13张图" />
<img src="images/14.jpg" rel="images/14.jpg" tl="第14张图" />
<img src="images/15.jpg" rel="images/15.jpg" tl="第15张图" />
<img src="images/16.jpg" rel="images/16.jpg" tl="第16张图" />
<img src="images/17.jpg" rel="images/17.jpg" tl="第17张图" />
<img src="images/18.jpg" rel="images/18.jpg" tl="第18张图" />
<img src="images/19.jpg" rel="images/19.jpg" tl="第19张图" />
<img src="images/20.jpg" rel="images/20.jpg" tl="第20张图" />
</div>
</div>
<img src="skin/gobottom.gif" width="100" height="14" id="gobottom" />
</div>
</div>
<div class="NumContent">第<b id="NowPhotoSite">1</b>张 共<b id="PhotoListTotal">8</b>张 <a href="#" id="PhotoUrl" target="_blank">原图</a></div></td>
</body>
</html>
<script language="javascript" type="text/javascript">window.onload = MyLib1.init();</script>
JS编写的基于网页的图片浏览器
4星 · 超过85%的资源 需积分: 11 37 浏览量
2012-02-20
15:10:06
上传
评论
收藏 1.57MB RAR 举报 
可横向和纵向式小图导航相册(JS[20110630编写测试]).rar （37个子文件） 
可横向和纵向式小图导航相册(JS[20110630编写测试]) skin 
right.gif 354B gobottom2.gif 165B
next.cur 3KB gotop.gif 174B goleft.gif 111B goright2.gif 111B prev.cur 3KB loading.gif 701B gotop2.gif 174B
Showbg.png 99B gobottom.gif 165B goleft2.gif 111B left.gif 354B goright.gif 111B
index.html 5KB index1.html 4KB images 
19.jpg 46KB 2.jpg 78KB 11.jpg 69KB 13.jpg 38KB 8.jpg 86KB 6.jpg 83KB 1.jpg 112KB 16.jpg 44KB 12.jpg 65KB 14.jpg 99KB 4.jpg 123KB 5.jpg 77KB 17.jpg 107KB 9.jpg 73KB 18.jpg 117KB 10.jpg 108KB 7.jpg 73KB 20.jpg 117KB 15.jpg 137KB 3.jpg 67KB photoshowlib.js 11KB资源评论
dcgjxpwy2012-11-02这个非常好 就是一般的图片展示的 不过有bug 在项目中时init总是报错 不知道为什么 需要优化啊
