相信很多網站設計的時候都會運用到橫向相冊效果一樣的幻燈片，這樣可以美化網站，讓訪客印象深刻（如圖），那么網站設計如何加上這樣的相冊效果呢？其實很簡單，只要把代碼復制到要放到的圖層即可。
代碼如下：
<!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=utf-8" /> <title>無標題文檔</title> </head> <body> <title></title> <style> body {background:#000;margin:0;font:12px Verdana;text-align:center;} #tbody {width:650px;margin:20px auto;text-align:left;} #mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px} #mainphoto {cursor:pointer;display:block;} #goleft {float:left;clear:left;margin:6px 5px 0 3px;} #goright {float:right;clear:right;margin:6px 3px 0 5px;} #photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;} #showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222} .txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;} </style> <body> <div id="tbody"> <div id="mainbody"> <img src="1524244292-1.jpg" width="640" height="400" id="mainphoto" rel="1524244292-1.jpg" name="http://www.sjf2002.com" /> </div> <img src="left.jpg" width="11" height="56" id="goleft" /> //需要更換圖片地址 <img src="right.jpg" width="11" height="56" id="goright" /> //需要更換圖片地址 <div id="photos"> <div id="showArea"> <!-- SRC: 縮略圖地址 REL: 大圖地址 NAME: 網址 --> <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="http://www.sjf2002.com" /> <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="http://www.sjf2002.com" /> //需要更換圖片地址 <img src="942ef5261aebfd3f918f9dd2.jpg" width="80" height="50" rel="942ef5261aebfd3f918f9dd2.jpg" name="http://www.sjf2002.com" /> //需要更換圖片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="http://www.sjf2002.com" /> //需要更換圖片地址 <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="http://www.sjf2002.com" /> //需要更換圖片地址 <img src="334fbeadd6d1bfc1faed500d.jpg" width="80" height="50" rel="334fbeadd6d1bfc1faed500d.jpg" name="http://www.sjf2002.com" /> //需要更換圖片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="http://www.sjf2002.com" /> //需要更換圖片地址 <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="http://www.sjf2002.com" /> //需要更換圖片地址