JS旋转木马图片轮播

今天看别人做了个旋转木马图片轮播图,自己手痒也做了个,话不多说,源码附上^_^

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>
HTML

 

CSS部分:

 

  1 
CSS

 

 

JS部分:

  1 
JS

 

效果图:

 

你可能感兴趣的:(JS旋转木马图片轮播)