1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>旋转木马轮播图</title> 6 <link rel="stylesheet" href="css/css.css"/> 7 <script type="text/javascript" src="js/animate.js"></script> 8 <script type="text/javascript" src="js/0my.js"></script> 9 </head> 10 <body> 11 <div class="wrap" id="wrap"> 12 <div class="slide" id="slide"> 13 <ul> 14 <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li> 15 <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li> 16 <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li> 17 <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li> 18 <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li> 19 </ul> 20 <div class="arrow" id="arrow"> 21 <a href="javascript:;" class="prev" id="arrLeft"></a> 22 <a href="javascript:;" class="next" id="arrRight"></a> 23 </div> 24 </div> 25 </div> 26 </body> 27 </html>
animate.js
1 /** 2 * Created by jf on 2016/4/3. 3 */ 4 //需求 将 任意对象 的 任意属性 渐渐地变为 目标值 5 function animate(obj, json, fn) { 6 clearInterval(obj.timer); 7 obj.timer = setInterval(function () { 8 var flag = true; 9 for (var k in json) { 10 if (k == "opacity") { 11 var leader = getStyle(obj, k) * 100; 12 var target = json[k] * 100; 13 var step = (target - leader) / 10; 14 step = step > 0 ? Math.ceil(step) : Math.floor(step); 15 leader = leader + step; 16 obj.style[k] = leader / 100; 17 } else if (k == "zIndex") { 18 obj.style[k] = json[k]; 19 } else { 20 var leader = parseInt(getStyle(obj, k)) || 0; 21 var target = json[k]; 22 var step = (target - leader) / 10; 23 step = step > 0 ? Math.ceil(step) : Math.floor(step); 24 leader = leader + step; 25 obj.style[k] = leader + "px"; 26 } 27 console.log("target: " + target + "leader: " + leader + "step: " + step); 28 if (leader != target) { 29 flag = false;//告诉人家 我还有没到的呢 30 } 31 } 32 //最后再判断 如果标记仍然是true说明 没有没到达的了 33 //也就是都到达了 34 if (flag) { 35 clearInterval(obj.timer); 36 if (fn) { 37 fn(); 38 } 39 } 40 }, 15) 41 } 42 //兼容性的方法 43 function getStyle(obj, attr) { 44 if (obj.currentStyle) { 45 return obj.currentStyle[attr]; 46 } else { 47 return window.getComputedStyle(obj, null)[attr]; 48 } 49 }
0my.js
1 /** 2 * Created by jf on 2016/4/3. 3 */ 4 window.onload = function () { 5 var wrap = document.getElementById("wrap"); 6 var slide = document.getElementById("slide"); 7 var ul = slide.children[0]; 8 var lis = ul.children; 9 var arrow = document.getElementById("arrow"); 10 var arrRight = document.getElementById("arrRight"); 11 var arrLeft = document.getElementById("arrLeft"); 12 var config = [ 13 { 14 400, 15 top: 20, 16 left: 50, 17 opacity: 0.2, 18 zIndex: 2 19 },//0 20 { 21 600, 22 top: 70, 23 left: 0, 24 opacity: 0.8, 25 zIndex: 3 26 },//1 27 { 28 800, 29 top: 100, 30 left: 200, 31 opacity: 1, 32 zIndex: 4 33 },//2 34 { 35 600, 36 top: 70, 37 left: 600, 38 opacity: 0.8, 39 zIndex: 3 40 },//3 41 { 42 400, 43 top: 20, 44 left: 750, 45 opacity: 0.2, 46 zIndex: 2 47 }//4 48 ]; 49 wrap.onmouseover = function () { 50 animate(arrow, {"opacity": 1}); 51 } 52 wrap.onmouseout = function () { 53 animate(arrow, {"opacity": 0}); 54 } 55 function assign() { 56 for (var i = 0; i < lis.length; i++) { 57 animate(lis[i], config[i], function () { 58 flag = true; 59 }); 60 } 61 } 62 63 var flag = true; 64 65 assign(); 66 arrRight.onclick = function () { 67 //if (flag) { 68 flag = false; 69 config.push(config.shift()); 70 assign(); 71 //} 72 } 73 arrLeft.onclick = function () { 74 //if (flag) { 75 flag = false; 76 config.unshift(config.pop()); 77 assign(); 78 //} 79 } 80 }
css.css
1 @charset "UTF-8"; 2 /*初始化 reset*/ 3 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} 4 body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;} 5 ol,ul{list-style:none} 6 a{text-decoration:none} 7 fieldset,img{border:0;vertical-align:top;} 8 a,input,button,select,textarea{outline:none;} 9 a,button{cursor:pointer;} 10 11 .wrap{ 12 width:1200px; 13 margin:100px auto; 14 } 15 .slide { 16 height:500px; 17 position: relative; 18 } 19 .slide li{ 20 position: absolute; 21 left:200px; 22 top:0; 23 } 24 .slide li img{ 25 width:100%; 26 } 27 .arrow{ 28 opacity: 0; 29 } 30 .prev,.next{ 31 width:76px; 32 height:112px; 33 position: absolute; 34 top:50%; 35 margin-top:-56px; 36 background: url(../images/prev.png) no-repeat; 37 z-index: 99; 38 } 39 .next{ 40 right:0; 41 background-image: url(../images/next.png); 42 }