用CSS做滑动效果的图片画廊

代码:

1. <style>
   
2. #galleryh {
   
3.   padding:0;
   
4.   margin:0 auto 5em auto;
   
5.   list-style-type:none;
   
6.   overflow:hidden;
   
7.   width:495px;
   
8.   height:240px;
   
9.   border:1px solid #888;
   
10.   background:#fff url(user1/dang/upload/81259710685.gif);
    
11.   }
    
12. #galleryh li {
    
13.   float:left;
    
14.   }
    
15. #galleryh li a {
    
16.   display:block;
    
17.   height:240px;
    
18.   width:28px;
    
19.   float:left;
    
20.   text-decoration:none;
    
21.   border-right:1px solid #fff;
    
22.   cursor:default;
    
23.   }
    
24. #galleryh li a img {
    
25.   width:28px;
    
26.   height:240px;
    
27.   border:0;
    
28.   }
    
29. #galleryh li a:hover {
    
30.   background:#eee;
    
31.   width:320px;
    
32.   }
    
33. #galleryh li a:hover img {
    
34.   width:320px;
    
35.   }
    
36. </style>
    
37. <ul id="galleryh">
    
38. <li><a href="#nogo">
    
39. <img src="/Upfiles/BeyondPic/2007-09/20079294012285903.jpg" alt="#1" title="#1" /></a></li>
    
40. <li><a href="#nogo">
    
41. <img src="/Upfiles/BeyondPic/2007-09/20079293310680905.jpg" alt="#2" title="#2" /></a></li>
    
42. <li><a href="#nogo">
    
43. <img src="/Upfiles/BeyondPic/2007-09/20079296651862457.jpg" alt="#3" title="#3" /></a></li>
    
44. <li><a href="#nogo">
    
45. <img src="/Upfiles/BeyondPic/2007-09/20079299611942077.jpg" alt="#4" title="#4" /></a></li>
    
46. <li><a href="#nogo">
    
47. <img src="/Upfiles/BeyondPic/2007-09/20079291710926592.jpg" alt="#5" title="#5" /></a></li>
    
48. <li><a href="#nogo">
    
49. <img src="/Upfiles/BeyondPic/2007-09/20079291265795941.jpg" alt="#6" title="#6" /></a></li>
    
50. <li><a href="#nogo">
    
51. <img src="/Upfiles/BeyondPic/2007-09/20079291706613235.jpg" alt="#7" title="#7" /></a></li>
    
52. </ul>

复制代码