先看下效果演示吧！（備注：由于做的匆忙，圖片素材不是太好，所以效果要比想像中的差，感興趣的朋友可以自己嘗試）
用CSS做滑動效果的圖片的代碼如下（這樣做好的好處是 避免了使用FLASH 降低網頁體積 對SEO優化 比較好
缺點: 效果上和FLASH 沒發比）:
-
<style>
-
#galleryh{
-
padding:0;
-
margin:0auto5emauto;
-
list-style-type:none;
-
overflow:hidden;
-
width:495px;
-
height:240px;
-
border:1pxsolid#888;
-
background:#fffurl(/imagelist/06/24/o9642o826u4n.gif);
-
}
-
#galleryhli{
-
float:left;
-
}
-
#galleryhlia{
-
display:block;
-
height:240px;
-
width:28px;
-
float:left;
-
text-decoration:none;
-
border-right:1pxsolid#fff;
-
cursor:default;
-
}
-
#galleryhliaimg{
-
width:28px;
-
height:240px;
-
border:0;
-
}
-
#galleryhlia:hover{
-
background:#eee;
-
width:320px;
-
}
-
#galleryhlia:hoverimg{
-
width:320px;
-
}
-
</style>
-
-
<ulid="galleryh">
-
<li><ahref="#nogo">
-
<imgsrc="http://www.genban.org/uploads/allimg/c100602/12K4V3cT0-22A8_lit.jpg"alt="#1"title="#1"/></a></li>
-
<li><ahref="#nogo">
-
<imgsrc="http://www.genban.org/uploads/allimg/c100602/12K4V39C40-13258_lit.jpg"alt="#2"title="#2"/></a></li>
-
<li><ahref="#nogo">
-
<imgsrc="http://www.genban.org/uploads/allimg/c100602/12K4V3T10-1Y12_lit.jpg"alt="#3"title="#3"/></a></li>
-
<li><ahref="#nogo">
-
<imgsrc="http://www.genban.org/uploads/allimg/100602/21562L154-0-lp.jpg"alt="#4"title="#4"/></a></li>
-
<li><ahref="#nogo">
-
<imgsrc="http://www.genban.org/uploads/allimg/c100605/12KJ1150S0-15596_lit.jpg"alt="#5"title="#5"/></a></li>
-
<li><ahref="#nogo">
-
</ul>
最后要在織夢模板中調用這個，請注意DEDE 縮略圖調用代碼為： {dede:arclist row=10 titlelen=24 orderby=pubdate typeid=1 imgwidth='90' imgheight='90' type='all.'} <li> [field:imglink/] </li>
