全自动焦点图片滚动效果代码

这个效果真棒啊！

不错。。。。。。。。。。。。。。。。。。。。

上传网站，不晓得为什么没有这样的效果！！

1. @import url('reset.css');
   
2. body{
   
3.         background:#f0f0f0;
   
4.         color:#000;
   
5.         font-family: 'PT Sans Narrow', Arial, sans-serif;
   
6.         font-size:16px;
   
7. }
   
8. a{
   
9.         color:#000;
   
10.         text-decoration:none;
    
11. }
    
12. h1{
    
13.         padding:10px;
    
14.         margin:20px;
    
15.         font-size:40px;
    
16.         text-transform:uppercase;
    
17.         text-shadow:0px 0px 1px #fff;
    
18.         color:#333;
    
19.         background:transparent url(../imagesne.png) repeat-x bottom left;
    
20. }
    
21. .rm_wrapper{
    
22.         width:1160px;
    
23.         margin:0 auto;
    
24.         position:relative;
    
25. }
    
26. .rm_container{
    
27.         width:1050px;
    
28.         overflow:hidden;
    
29.         position:relative;
    
30.         height:530px;
    
31.         margin:0 auto;
    
32. }
    
33. .rm_container h2{
    
34.         background:transparent url(../imagesnes.png) repeat top left;
    
35.         padding:10px 30px;
    
36.         position:absolute;
    
37.         bottom:170px;
    
38.         right:0px;
    
39.         color:#000;
    
40.         font-size:36px;
    
41.         text-transform:uppercase;
    
42.         text-shadow:1px 0px 1px #fff;
    
43. }
    
44. .rm_container ul{
    
45.         width:1170px;
    
46. }
    
47. .rm_container ul li{
    
48.         float:left;
    
49.         margin-left:-80px;
    
50.         position:relative;
    
51.         overflow:hidden;
    
52.         width:310px;
    
53.         height:465px;
    
54.         border:30px solid #f0f0f0;
    
55.         border-width:50px 30px 0px 30px;
    
56.         background-color:#f0f0f0;
    
57. }
    
58. .rm_container ul li img{
    
59.         position:absolute;
    
60.         top:0px;
    
61.         left:0px;
    
62. }
    
63. .rm_mask_right, .rm_mask_left{
    
64.         position: absolute;
    
65.         height: 110px;
    
66.         background: #f0f0f0;
    
67.         width: 530px;
    
68.         bottom: -30px;
    
69.         left: 0px;
    
70.         -moz-transform:rotate(-3deg);
    
71.         -webkit-transform:rotate(-3deg);
    
72.         transform:rotate(-3deg);
    
73. }
    
74. .rm_mask_right{
    
75.         left:auto;
    
76.         right:0px;
    
77.         -moz-transform:rotate(3deg);
    
78.         -webkit-transform:rotate(3deg);
    
79.         transform:rotate(3deg);
    
80. }
    
81. .rm_corner_right, .rm_corner_left{
    
82.         background: #f0f0f0;
    
83.         position:absolute;
    
84.         width:200px;
    
85.         height:100px;
    
86.         bottom:0px;
    
87.         left:-65px;
    
88.         -moz-transform:rotate(45deg);
    
89.         -webkit-transform:rotate(45deg);
    
90.         transform:rotate(45deg);
    
91. }
    
92. .rm_corner_right{
    
93.         left:auto;
    
94.         right:-65px;
    
95.         -moz-transform:rotate(-45deg);
    
96.         -webkit-transform:rotate(-45deg);
    
97.         transform:rotate(-45deg);
    
98. }
    
99. .rm_nav a{
    
100.         position:absolute;
     
101.         top:200px;
     
102.         width:38px;
     
103.         height:87px;
     
104.         cursor:pointer;
     
105.         opacity:0.7;
     
106. }
     
107. .rm_nav a:hover{
     
108.         opacity:1.0;
     
109. }
     
110. .rm_nav a.rm_next{
     
111.         background:transparent url(../images/next.png) no-repeat top left;
     
112.         right:0px;
     
113. }
     
114. .rm_nav a.rm_prev{
     
115.         background:transparent url(../images/prev.png) no-repeat top left;
     
116.         left:0px;
     
117. }
     
118. .rm_controls{
     
119.         position:absolute;
     
120.         top:0px;
     
121.         left:-40px;
     
122.         height:20px;
     
123. }
     
124. .rm_controls a{
     
125.         cursor:pointer;
     
126.         opacity:0.7;
     
127.         padding-left:24px;
     
128.         font-size:16px;
     
129.         text-transform:uppercase;
     
130.         height:20px;
     
131.         float:left;
     
132.         line-height:20px;
     
133. }
     
134. .rm_controls a:hover{
     
135.         opacity:1.0;
     
136. }
     
137. .rm_controls a.rm_play{
     
138.         display:none;
     
139.         background:transparent url(../images/play.png) no-repeat center left;
     
140. }
     
141. .rm_controls a.rm_pause{
     
142.         background:transparent url(../images/pause.png) no-repeat center left;
     
143. }
     
144. /* Footer Style */
     
145. .footer{
     
146.         position:fixed;
     
147.         bottom:0px;
     
148.         left:0px;
     
149.         width:100%;
     
150.         font-size:13px;
     
151.         background:#000;
     
152.         opacity:0.9;
     
153.         height:20px;
     
154.         padding-bottom:5px;
     
155.         text-transform:uppercase;
     
156.         z-index:4;
     
157. }
     
158. .footer a{
     
159.         padding:5px 10px;
     
160.         letter-spacing:1px;
     
161.         text-shadow:1px 1px 1px #000;
     
162.         color:#ddd;
     
163.         float:right;
     
164. }
     
165. .footer a:hover{
     
166.         color:#fff;
     
167. }
     
168. .footer a span{
     
169.         font-weight:bold;
     
170. }
     
171. .footer a.left{
     
172.         float:left;
     
173. }

复制代码

支持下，很好看