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 <style type="text/css">
  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 </style>
CSS

 

 

JS部分：

  1 <script type="text/javascript">
  2     function getStyle(obj, name) {
  3         if(obj.currentStyle) {
  4             return obj.currentStyle[name];
  5         } else {
  6             return getComputedStyle(obj, false)[name];
  7         }
  8     }
  9 
 10     function startMove(obj, json, fnEnd) {
 11         clearInterval(obj.timer);
 12         obj.timer = setInterval(function() {
 13             var bStop = true;
 14             for(var attr in json) {
 15                 var cur = 0;
 16 
 17                 if(attr == 'opacity') {
 18                     cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
 19                 } else {
 20                     cur = parseInt(getStyle(obj, attr));
 21                 }
 22 
 23                 var speed = (json[attr] - cur) / 6;
 24                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 25 
 26                 if(cur != json[attr]) bStop = false;
 27 
 28                 if(attr == 'opacity') {
 29                     obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
 30                     obj.style.opacity = (cur + speed) / 100;
 31                 } else {
 32                     obj.style[attr] = cur + speed + 'px';
 33                 }
 34             }
 35 
 36             if(bStop) {
 37                 clearInterval(obj.timer);
 38                 if(fnEnd) fnEnd();
 39             }
 40 
 41         }, 30)
 42 
 43     }
 44     window.onload = function() {
 45         var oPic = document.getElementById('pic');
 46         var oPrev = getByClass(oPic, 'prev')[0];
 47         var oNext = getByClass(oPic, 'next')[0];
 48 
 49         var aLi = oPic.getElementsByTagName('li');
 50 
 51         var arr = [];
 52         for(var i = 0; i < aLi.length; i++) {
 53             var oImg = aLi[i].getElementsByTagName('img')[0];
 54 
 55             arr.push([parseInt(getStyle(aLi[i], 'left')), parseInt(getStyle(aLi[i], 'top')),
 56                 getStyle(aLi[i], 'zIndex'), oImg.width, parseFloat(getStyle(aLi[i], 'opacity') * 100)
 57             ]);
 58         }
 59 
 60         oPrev.onclick = function() {
 61             arr.push(arr[0]);
 62             arr.shift();
 63             for(var i = 0; i < aLi.length; i++) {
 64                 var oImg = aLi[i].getElementsByTagName('img')[0];
 65 
 66                 aLi[i].style.zIndex = arr[i][2];
 67                 startMove(aLi[i], {
 68                     left: arr[i][0],
 69                     top: arr[i][1],
 70                     opacity: arr[i][4]
 71                 });
 72                 startMove(oImg, {
 73                     width: arr[i][3]
 74                 });
 75             }
 76 
 77         }
 78 
 79         oNext.onclick = function() {
 80             arr.unshift(arr[arr.length - 1]);
 81             arr.pop();
 82             for(var i = 0; i < aLi.length; i++) {
 83                 var oImg = aLi[i].getElementsByTagName('img')[0];
 84 
 85                 aLi[i].style.zIndex = arr[i][2];
 86                 startMove(aLi[i], {
 87                     left: arr[i][0],
 88                     top: arr[i][1],
 89                     opacity: arr[i][4]
 90                 });
 91                 startMove(oImg, {
 92                     width: arr[i][3]
 93                 });
 94             }
 95         }
 96 
 97         function getStyle(obj, name) {
 98             if(obj.currentStyle) {
 99                 return obj.currentStyle[name];
100             } else {
101                 return getComputedStyle(obj, false)[name];
102             }
103         }
104     }
105 
106     function getByClass(oParent, sClass) {
107         var aResult = [];
108         var aEle = oParent.getElementsByTagName('*');
109 
110         for(var i = 0; i < aEle.length; i++) {
111             if(aEle[i].className == sClass) {
112                 aResult.push(aEle[i]);
113             }
114         }
115         return aResult;
116     }
117 </script>
JS

 

效果图：

 

posted on 2020-05-01 23:05  北冥道人骑鲲打代码  阅读(264)  评论(0)  编辑  收藏  举报

导航