JS旋转木马图片轮播
2021-03-14 02:30
标签：tar false obj 图片轮播 round com win title script 今天看别人做了个旋转木马图片轮播图，自己手痒也做了个，话不多说，源码附上^_^ HTML部分： CSS部分： JS部分： 效果图： JS旋转木马图片轮播 标签：tar false obj 图片轮播 round com win title script 原文地址：https://www.cnblogs.com/beimingdaoren/p/12815228.html
1 DOCTYPE html>
2 html>
3
4 head>
5 meta charset="utf-8" />
6 title>JS旋转木马图片轮播代码title>
7 head>
8
9 body>
10 div class="pic" id="pic">
11 span class="prev">img src="image/arrow1.png" alt="arrow" />span>
12 span class="next">img src="image/arrow2.png" alt="arrow" />span>
13 ul>
14 li class="pic1">
15 a href="#">img src="image/f1.jpg" alt="旋转木马" />a>
16 li>
17 li class="pic2">
18 a href="#">img src="image/f2.jpg" alt="旋转木马" />a>
19 li>
20 li class="pic3">
21 a href="#">img src="image/f3.jpg" alt="旋转木马" />a>
22 li>
23 li class="pic4">
24 a href="#">img src="image/f4.jpg" alt="旋转木马" />a>
25 li>
26 li class="pic5">
27 a href="#">img src="image/f5.jpg" alt="旋转木马" />a>
28 li>
29 li class="pic6">
30 a href="#">img src="image/f6.jpg" alt="旋转木马" />a>
31 li>
32 li class="pic7">
33 a href="#">img src="image/f7.jpg" alt="旋转木马" />a>
34 li>
35 li class="pic7">
36 a href="#">img src="image/f8.jpg" alt="旋转木马" />a>
37 li>
38 ul>
39 div>
40 body>
41 html>
1 2 *{margin: 0;padding: 0;list-style: none;}
3 img {border: 0;}
4 html {width: 100%;height: 100%;}
5
6 body {
7 background: url(image/f9.jpg) no-repeat 0 0 /cover;/*背景图片*/
8 width: 100%;
9 height: 100%;
10 }
11
12 #pic {
13 position: relative;
14 overflow: hidden;
15 height: 400px;
16 width: 890px;
17 z-index: 2;
18 margin: 0 auto 100px;
19 }
20
21 #pic ul {
22 width: 100%;
23 height: 100%;
24 position: absolute;
25 top: 0;
26 left: 0;
27 }
28
29 #pic ul li {
30 position: absolute;
31 }
32
33 #pic ul img {
34 position: relative;
35 top: 0;
36 left: 0;
37 }
38 /*图片位置*/
39
40 #pic ul .pic1 {
41 top: -80px;
42 left: 2px;
43 z-index: 1;
44 }
45
46 #pic ul .pic2 {
47 top: 110px;
48 left: 88px;
49 z-index: 2;
50 }
51
52 #pic ul .pic3 {
53 top: 80px;
54 left: 174px;
55 z-index: 3;
56 }
57
58 #pic ul .pic4 {
59 top: 50px;
60 left: 260px;
61 z-index: 4;
62 }
63
64 #pic ul .pic5 {
65 top: 80px;
66 left: 436px;
67 z-index: 3;
68 }
69
70 #pic ul .pic6 {
71 top: 110px;
72 left: 700px;
73 z-index: 2;
74 }
75
76 #pic ul .pic7 {
77 top: -180px;
78 left: 696px;
79 z-index: 1;
80 }
81 /*图片A标签width和height*/
82
83 #pic ul .pic1 a {
84 height: 60px;
85 width: 96px;
86 }
87
88 #pic ul .pic2 a {
89 height: 180px;
90 width: 288px;
91 }
92
93 #pic ul .pic3 a {
94 height: 240px;
95 width: 384px;
96 }
97
98 #pic ul .pic4 a {
99 height: 300px;
100 width: 480px;
101 }
102
103 #pic ul .pic5 a {
104 height: 240px;
105 width: 384px;
106 }
107
108 #pic ul .pic6 a {
109 height: 180px;
110 width: 288px;
111 }
112
113 #pic ul .pic7 a {
114 height: 180px;
115 width: 288px;
116 }
117 /*图片明暗*/
118
119 #pic ul li.pic1 {
120 opacity: 0.2;
121 filter: alpha(opacity:20);
122 }
123
124 #pic ul li.pic2 {
125 opacity: 0.6;
126 filter: alpha(opacity:60);
127 }
128
129 #pic ul li.pic3 {
130 opacity: 0.9;
131 filter: alpha(opacity:90);
132 }
133
134 #pic ul li.pic4 {
135 opacity: 1;
136 filter: alpha(opacity:100);
137 }
138
139 #pic ul li.pic5 {
140 opacity: 0.9;
141 filter: alpha(opacity:90);
142 }
143
144 #pic ul li.pic6 {
145 opacity: 0.6;
146 filter: alpha(opacity:60);
147 }
148
149 #pic ul li.pic7 {
150 opacity: 0.2;
151 filter: alpha(opacity:20);
152 }
153 /*图片width*/
154
155 #pic ul li.pic1 img {
156 width: 96px;
157 }
158
159 #pic ul li.pic2 img {
160 width: 288px;
161 }
162
163 #pic ul li.pic3 img {
164 width: 384px;
165 }
166
167 #pic ul li.pic4 img {
168 width: 480px;
169 }
170
171 #pic ul li.pic5 img {
172 width: 384px;
173 }
174
175 #pic ul li.pic6 img {
176 width: 288px;
177 }
178
179 #pic ul li.pic7 img {
180 width: 288px;
181 }
182 /*箭头部分*/
183
184 #pic span {
185 display: inline-block;
186 *display: inline;
187 *zoom: 1;
188 width: 80px;
189 height: 80px;
190 position: absolute;
191 top: 160px;
192 z-index: 30;
193 cursor: pointer;
194 opacity: 0.7;
195 filter: alpha(opacity=70);
196 }
197
198 #pic:hover span {
199 opacity: 1;
200 filter: alpha(opacity=100);
201 }
202
203 #pic span img {
204 width: 80px;
205 height: 80px;
206 display: block;
207 }
208
209 #pic span.prev {
210 left: 200px;
211 }
212
213 #pic span.next {
214 right: 120px;
215 }
216
1
