JS旋转木马图片轮播
Posted 北冥道人骑鲲打代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
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>
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旋转木马图片轮播的主要内容，如果未能解决你的问题，请参考以下文章