核心代碼：
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>