核心代码：
1.CSS：16sucai.css
复制代码代码如下：
html，身体{
身高：100％；
保证金：0px;
填充：0px;
}
一个{大纲：无;}
img {border：0;}
img {垂直align：top;}
img.last {边缘右：0; }
。盒子 {
宽度：850px;
身高：自动；
溢出：隐藏；
背景：＃666;
保证金顶：10px;
边缘权利：自动；
边缘底：10px;
左翼：自动；
填充：10px;
右右：0;
填充底：0;
左填充：10px;
}
.box ul {
保证金：0px;
填充：0px;
浮子：左；
列表式型：无；
}
.box li {
宽度：150px;
身高：100px;
浮子：左；
光标：指针；
显示：内联；
保证金：0 10px 10px 0;
边界：5PX实心＃333;
}
#bg {
宽度：100％；
身高：898px;
位置：绝对；
左：0px;
顶部：0px;
背景：＃000;
过滤器：alpha（不透明度：50）;
不透明度：0.5;
显示：无；
}
＃bg1 {
宽度：100％；
身高：100％；
位置：绝对；
左：0px;
顶部：0px;
背景：＃000;
过滤器：alpha（不透明度：50）;
不透明度：0.5;
显示：无；
}
＃底部 {
宽度：215px;
身高：50px;
位置：绝对；
左：50％；
底部：0px;
保证金：0 0 0 -107px;
边界：1PX实心＃232323;
背景：＃444;
填充：1px;
z索引：1;
显示：无；
}
#bottom ul {
宽度：100％；
身高：100％；
保证金：0px;
填充：0px;
列表式型：无；
背景：＃000;
}
#bottom li {
背景：URL（../ images/ico.jpg）no-repeat;
浮子：左；
显示：内联；
保证金：8px 0 0 18px;
光标：指针；
}
#bottom li.prev {
宽度：30px;
身高：33px;
背景位置：0 0;
}
#bottom li.next {
宽度：30px;
身高：33px;
背景位置：-35px 0;
}
#bottom li.img {
宽度：30px;
身高：33px;
背景位置：-106px 0;
}
#bottom li.close {
宽度：31px;
身高：33px;
背景位置：-70px 0;
}
＃框架 {
背景：#fff;
填充：3px;
位置：绝对；
z索引：2;
显示：无；
过滤器：alpha（不透明度：0）;
不透明度：0;
文字平衡：中心；
}
＃bottom1 {
宽度：215px;
身高：50px;
位置：绝对；
左：50％；
底部：0px;
保证金：0 0 0 -107px;
边界：1PX实心＃232323;
背景：＃444;
填充：1px;
z索引：1;
显示：无；
}
＃bottom1 ul {
宽度：100％；
身高：100％；
保证金：0px;
填充：0px;
列表式型：无；
背景：＃000;
}
＃底部1 li {
背景：url（../../ images/ico.jpg）no-repeat;
浮子：左；
显示：内联；
保证金：8px 0 0 18px;
光标：指针；
}
＃bottom1 li.prev {
宽度：30px;
身高：33px;
背景位置：0 0;
}
＃bottom1 li.next {
宽度：30px;
身高：33px;
背景位置：-35px 0;
}
＃bottom1 li.img {
宽度：30px;
身高：33px;
背景位置：-106px 0;
}
＃bottom1 li.close {
宽度：31px;
身高：33px;
背景位置：-70px 0;
}
＃frame1 {
背景：#fff;
填充：3px;
位置：绝对；
z索引：2;
显示：无；
过滤器：alpha（不透明度：0）;
不透明度：0;
文字平衡：中心；
}
/
html，身体{
身高：100％；
保证金：0px;
字体大小：12px;
}
.mydiv {
背景色：＃ffcc66;
背景：url（../ images/loginbg.png）no-repeat;
边界：0px实心＃f00;
溢出Y：自动；
Overflow-X：自动;
文字平衡：中心；
线高：40px;
字体大小：12px;
字体重量：大胆；
Z-Index：999;
宽度：434px;
身高：238px;
左：50％；
顶部：50％；
左键：-200px！重要； / *ff IE7该值为本身宽的一半 */
保证金顶：-80px！ /*ff IE7该值为本身高的一半*/
保证金顶：0px;
位置：固定！重要； /* ff IE7*/
位置：绝对； /*IE6*/
_top：expression（eval（document。CompatMode&&）
文档 。 compatMode =='css1 compat'）？
纪录片。 scrolltop +（文档。
纪录片。客户端 - 这。交叉）/ 2：/*IE6*/
文档 。身体 。 scrolltop +（文档。正文。
客户端 - 这个。 ClientHeight）/ 2）; /*IE5 IE5.5*/
}
.mydiv1 {
背景色：＃ffcc66;
边界：0px实心＃f00;
文字平衡：中心；
线高：40px;
字体大小：12px;
字体重量：大胆；
溢出Y：自动；
Overflow-X：自动;
Z-Index：999;
宽度：434px;
身高：238px;
左：50％；
顶部：50％；
左键：-200px！重要； / *ff IE7该值为本身宽的一半 */
保证金顶：-80px！ /*ff IE7该值为本身高的一半*/
保证金顶：0px;
位置：固定！重要； /* ff IE7*/
位置：绝对； /*IE6*/
_top：expression（eval（document。CompatMode&&）
文档 。 compatMode =='css1 compat'）？
纪录片。 scrolltop +（文档。
纪录片。客户端 - 这。交叉）/ 2：/*IE6*/
文档 。身体 。 scrolltop +（文档。正文。
客户端 - 这个。 ClientHeight）/ 2）; /*IE5 IE5.5*/
}
.bg，.popiframe {
背景色：＃666;
显示：无；
宽度：100％；
身高：100％；
左：0;
顶部：0; /*ff IE7*/
过滤器：alpha（不透明度= 50）; /*IE*/
不透明度：0.5; /*ff*/
z索引：1;
位置：固定！重要； /*ff IE7*/
位置：绝对； /*IE6*/
_top：expression（eval（document。CompatMode&&）
文档 。 compatMode =='css1 compat'）？
纪录片。 scrolltop +（文档。
纪录片。客户端 - 这。交叉）/ 2：/*IE6*/
文档 。身体 。 scrolltop +（文档。正文。
客户端 - 这个。 ClientHeight）/ 2）;
}
.popiframe {
过滤器：alpha（不透明度= 0）; /*IE*/
不透明度：0; /*ff*/
}
2.js事件：
复制代码代码如下：
<link rel =“ stylesheet” type =“ text/css” href =“ <％=路径％>/css/16sucai.css”/>
<脚本类型=“ text/javascript”>
功能AA（ID）{
var id = id.substring（1,2）;
var obj2 = document.getElementById（id）;
Showpigdyt（obj2）;
}
功能ShowInfo（ID）
{
document.getElementById（id）.style.display =“ block”;
}
功能HiddenInfo（ID）
{
document.getElementById（id）.style.display =“ none”;
}
</script>
<脚本语言=“ javascript”>
//首页点击查看景点热门照片
函数Showpigdyt（obj2）{
var srcpath = obj2.name;
var id = obj2.id;
var obox = document.getElementById（“ con”）;
var obg = document.getElementById（“ bg”）;
var obot = document.getElementById（“底部”）;
var abli = obot.getElementsbytagname（“ li”）;
var oframe = document.getElementById（“ frame”）;
// var ali = obox.getElementsbytagname（“ li”）;
var ali = $（“ li [class ='conn']”）; //
// var aimg = obox.getElementsbytagname（“ img”）;
var aimg = $（“ img [class ='conn']”）; //获取所有a标签里的img标签（集合）
//警报（AIMG）;
var i = inow = 0;
for（i = 0; i <ali.length; i ++）{
ali [i] .index = i;
ali [i] .onclick = function（）{
使用（oframe.style）{
display =“ block”，top = this.offsettop +“ px”，left = this.offsetleft +“ px”，width = this.offsetWidth +“ px”，height = this.offsetheight +“ px”;
}
// alert（srcpath）;
oframe.innerhtml =“ <img ID =/” + id +“/” onMouseOver ='upnext（this）'src =/“” +（srcpath） +“/”/“/>”;
var oimg = oframe.getElementsbytagname（“ img”）[0];
var iwidth;
var iheight;
if（oimg.width <600 || oimg.width == 0）{
iWidth = 600;
}别的{
iwidth = oimg.width;
}
if（oimg.width <425 || oimg.height == 0）{
Iheight = 425;
}别的{
iheight = oimg.height;
}
var ileft = parseint（（（document.documentElement.ClientWidth / 2）） - （iWidth / 2））;
var itop = parseint（（（document.documentElement.ClientHeight / 2）） - （iHeight / 2） - 50）;
使用（oimg.style）{
高度=宽度=“ 100％”;
}
StartMove（oframe，{不透明度：100，左：ileft，top：itop，width：iwidth，高度：iheight}）;
obg.style.display =“ block”;
obot.style.display =“ block”;
inow = this.index + 1;
};
}
document.onmousedown = function（）{
返回false;
};
abli [0] .onclick = function（）{//箭头向左事件触发
如果（id == 0）{
id = ali.length;
}
ID - ;
var pathimg = document.getElementById（id）.name;
oframe.innerhtml =“ <img ID =/” + id +“/” onMouseOver ='upnext（this）'src =/“” + pathimg +“/” width =/“ 100％/”高度=/“ 100 ％ /“ />”;
};
abli [1] .onclick = function（）{
oframe.style.cursor =“ move”;
oframe.onmousedown =函数（e）{
var oevent = e ||事件;
var x = oevent.clientx -oframe.offsetleft;
var y = oevent.clienty -oframe.offsettop;
document.onmousemove =函数（e）{
var oevent = e ||事件;
var l = oevent.clientx -x;
var t = oevent.clienty -y;
如果（l <0）{
l = 0;
} 别的 {
if（l> document.documentElement.ClientWidth -frame.offsetWidth）{
l = document.documentElement.ClientWidth -oframe.offsetWidth;
}
}
如果（t <0）{
t = 0;
} 别的 {
if（t> document.documentElement.ClientHeight -oframe.offsetheight）{
t = document.documentElement.ClientHeight -oframe.offsetheight;
}
}
oframe.style.left = l +“ px”;
oframe.style.top = t +“ px”;
oframe.style.margin = 0;
返回false;
};
document.onmouseup = function（）{
document.onmouseup = null;
document.onmousemove = null;
};
返回false;
};
};
abli [2] .onclick = function（）{//箭头向右事件触发
如果（id ==（ali.length-1））{
id = -1;
}
ID ++;
var pathimg = document.getElementById（id）.name;
oframe.innerhtml =“ <img ID =/” + id +“/” onMouseOver ='upnext（this）'src =/“” + pathimg +“/” width =/“ 100％/”高度=/“ 100 ％ /“ />”;
};
abli [3] .onclick = function（）{//箭头关闭事件触发
//警报（“ 32” + INOW -1）;
// alert（“ 32” + aimg [inow -1] .offsetTop）;
StartMove（ofRame，{opacity：0，左：aimg [inow -1] .offsetleft，top：aimg [inow -1] .offsetTop，宽度：150，高度：100}，function（）{
oframe.style.display =“ none”;
obg.style.display =“ none”;
obot.style.display =“ none”;
oframe.onmousedown = null;
oframe.style.cursor =“ auto”;
}）;
};
}
功能UPNEXT（BIGIMG）{
var obox = document.getElementById（“ con”）;
// var ali = obox.getElementsbytagname（“ li”）;
var ali = $（“ li [class ='conn']”）; //获取所有a li标签
var id = bigimg.id;
var leftid;
rightid;
如果（id == 0）{
leftid = ali.length;
rightid = 1;
} else if（id ==（ali.length-1））{
leftid =（ali.length-1）;
rightid = 0;
}别的{
var leftid = id ++;
var rightid = id--;
}
var leftpath = document.getElementById（ - leftId）.name;
var rightpath = document.getElementById（rightId）.name;
var lefturl =“ <img id =/” + leftid +“/” onmouseover ='upnext（this）'src =/“” + leftpath +“/” width =/“ 100％/” height =/“ 100％ /“ />”;
var righturl =“ <img id =/” + rightid +“/” onmouseover ='upnext（this）'src =/“” + rightpath +“/” width =/“ 100％/”高度=/“ 100％ /“ />”;
var width = bigimg.width;
var高度= bigimg.height;
var imgurl = righturl;
var oframe = document.getElementById（“ frame”）;
bigimg.onmousemove = function（）{
if（event.offsetx <width/2）{
bigimg.style.cursor ='url（images/arr_left.cur），auto';
imgurl = lefturl;
}别的{
bigimg.style.cursor ='url（images/arr_right.cur），auto';
imgurl = righturl;
}
}
bigimg.onmouseup = function（）{
if（event.offsetx <width/2）{
oframe.innerhtml = lefturl;
}别的{
oframe.innerhtml = righturl;
}
}
}
函数startMove（obj，json，onend）{
clearinterval（obj.timer）;
obj.timer = setInterval（function（）{
DOMOVE（OBJ，JSON，ONEND）;
}，30）;
}
函数getStyle（obj，attr）{
返回obj.currentstyle？ obj.currentstyle [attr]：getComputedStyle（obj，false）[attr];
}
功能DOMOVE（OBJ，JSON，ONEND）{
var attr =“”;
var bstop = true;
for（att in json）{
var iCur = 0;
if（attr ==“不透明度”）{
ICUR = ParseInt（ParseFloat（getStyle（obj，attr）） * 100）;
} 别的 {
iCUR = parseint（getStyle（obj，attr））;
}
var iSpeed =（JSON [attr] - ICUR） / 5;
ispeed = ispeed> 0？ Math.ceil（ISPEED）：Math.Floor（ISPEED）;
if（json [attr]！= iCur）{
bstop = false;
}
if（attr ==“不透明度”）{
obj.style.filter =“ alpha（不透明度：” +（iCur + ispeed） +“）”;
obj.style.opacity =（iCur + iSpeed） / 100;
} 别的 {
obj.Style [attr] = iCur + ispeed +“ px”;
}
}
如果（bstop）{
clearinterval（obj.timer）;
if（onend）{
Onend（）;
}
}
}
</javaScript>
3.页面div：：
复制代码代码如下：
<div ID =“ con”>
<table cellpadding =“ 0” cellspacing =“ 0”
>
<c：选择>
<c：当test =“ $ {空image_list}”>时
<tr style =“高度：20px”>
<td colspan =“ 2”>
暂时没有图片信息
</td>
</tr>
</c：wher>
<c：否则>
<％for（int i = 0; i <3; i ++）{％>
<tr>
<c：foreach var =“ image”项目=“ $ {image_list}”
开始=“ <％= i * 5％>” end =“ <％=（i + 1） * 5-1％>” varstatus =“ strs”>
<td align =“ left”>
<ul> <li>
<a onclick =“ aa（this.id）” id =“ s $ {strs.index}”>
<img id =“ $ {strs.index}” style =“高度：116px; width：116px” src =“ <％= wholeproperties.image_image_image_url％>/$ {image.imagepathsmall} {image.imagePathmiddle}）“ name =” <％= wholeproperties.image_image_url％>/$ {image.imagepathmiddle}“/> </a>
</li> </ul>
<ul>
<li style =“ line-height：20px”>
<input type =“复选框” id =“ uppicid” name =“ uppicid” value =“ $ {image.id}” />
<c：选择>
<c：test =“ $ {fn：length（image.imagename）> 6}”>
<c：out value =“ $ {fn：substring（image.imageName，0，6）} ...” />
</c：wher>
<c：否则>
<c：out value =“ $ {image.imageName}” />
</c：否则>
</c：选择>
</li>
<li style =“ line-height：20px”>上传时间：<c：out value =“ $ {fn：substring（image.uploadtime，0,9）}”> </c：out>：out> </li>
<li style =“ line-height：20px”>图片大小：$ {image.imagesize} </li>
</ul>
</td>
</c：foreach>
</tr>
<％}％>
</c：否则>
</c：选择>
</table>
</div>
<div> </div>
<div> </div>
<div ID =“ bg”> </div>
<div ID =“底部”>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div ID =“ frame”> </div>