用CSS做滑动效果的图片

先看下效果演示吧！（备注：由于做的匆忙，图片素材不是太好，所以效果要比想像中的差，感兴趣的朋友可以自己尝试）

用CSS做滑动效果的图片的代码如下（这样做好的好处是 避免了使用FLASH 降低网页体积 对SEO优化 比较好
缺点: 效果上和FLASH 没发比）:

1. <style>
2. #galleryh{
3. padding:0;
4. margin:0auto5emauto;
5. list-style-type:none;
6. overflow:hidden;
7. width:495px;
8. height:240px;
9. border:1pxsolid#888;
10. background:#fffurl(/imagelist/06/24/o9642o826u4n.gif);
11. }
12. #galleryhli{
13. float:left;
14. }
15. #galleryhlia{
16. display:block;
17. height:240px;
18. width:28px;
19. float:left;
20. text-decoration:none;
21. border-right:1pxsolid#fff;
22. cursor:default;
23. }
24. #galleryhliaimg{
25. width:28px;
26. height:240px;
27. border:0;
28. }
29. #galleryhlia:hover{
30. background:#eee;
31. width:320px;
32. }
33. #galleryhlia:hoverimg{
34. width:320px;
35. }
36. </style>
37.  
38. <ulid="galleryh">
39. <li><ahref="#nogo">
40. <imgsrc="http://www.genban.org/uploads/allimg/c100602/12K4V3cT0-22A8_lit.jpg"alt="#1"title="#1"/></a></li>
41. <li><ahref="#nogo">
42. <imgsrc="http://www.genban.org/uploads/allimg/c100602/12K4V39C40-13258_lit.jpg"alt="#2"title="#2"/></a></li>
43. <li><ahref="#nogo">
44. <imgsrc="http://www.genban.org/uploads/allimg/c100602/12K4V3T10-1Y12_lit.jpg"alt="#3"title="#3"/></a></li>
45. <li><ahref="#nogo">
46. <imgsrc="http://www.genban.org/uploads/allimg/100602/21562L154-0-lp.jpg"alt="#4"title="#4"/></a></li>
47. <li><ahref="#nogo">
48. <imgsrc="http://www.genban.org/uploads/allimg/c100605/12KJ1150S0-15596_lit.jpg"alt="#5"title="#5"/></a></li>
49. <li><ahref="#nogo">
50. </ul>

最后要在织梦模板中调用这个，请注意DEDE 缩略图调用代码为： {dede:arclist row=10 titlelen=24 orderby=pubdate typeid=1 imgwidth='90' imgheight='90' type='all.'} <li> [field:imglink/] </li>