初學制做3D旋轉木馬

時間 2019-11-18

標籤初學製做 3d 旋轉木馬简体版

原文原文鏈接

---恢復內容開始---javascript

1.1. 旋轉木馬輪播圖思路

@數組操做方法複習css

arr.push("要添加的元素") 在數組的最後添加值並返回新數組的長度html

arr.pop() 刪除最後一個值並將其返回java

arr.unshift("要添加的元素") 在數組的開頭添加值並返回新數組的長度json

arr.shift() 刪除第一個值並將其返回數組

@旋轉木馬架構

獲取元素ide

鼠標通過wrap顯示arrow函數

給每一個li賦json值url

點擊左右箭頭調整數組

//點左鍵配置單刪掉最後一個加在開始

//點右鍵配置單刪掉第一個加在最後

將賦json值的方法抽取

點擊箭頭的時候執行

頁面加載完先執行一次

設置節流閥

第一步設置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 }

第二步：調用js緩動運動函數代碼

function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { //json 屬性名:屬性值 k:json[k] if (k == "opacity") { var leader = parseInt(getStyle(obj, k) * 100); var target = json[k] * 100; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader / 100; } else if (k == "zIndex") { obj.style[k] = json[k]; } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader != target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 10) } function getStyle(obj, attr) { if (obj && obj.currentStyle) { return obj.currentStyle[attr];//IE678 } else { return window.getComputedStyle(obj, null)[attr]; } }

第三步：主體架構實現

  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/my.js"></script>-->  9 </head>  10 <body>  11 <div class="wrap" id="wrap">  12 <div class="slide" id="slide">  13 <ul>  14 <li class="one"><a href="#"><img src="images/bingbing.jpg" alt=""/></a></li>  15 <li class="two"><a href="#"><img src="images/lingengxin.jpg" alt=""/></a></li>  16 <li class="three"><a href="#"><img src="images/yuanyuan.png" alt=""/></a></li>  17 <li class="four"><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>  18 <li class="five"><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 <script> 27 window.onload = function () { // 當整個頁面元素都渲染或是加載 完畢 的時候觸發 28 //1. 得到要操做的對象 29 var wrap = document.getElementById("wrap"); 30 var slideBox = document.getElementById("slide"); 31 var ul = slideBox.children[0]; 32 var lis = ul.children; 33 var arrow = document.getElementById("arrow"); 34 var left = document.getElementById("arrLeft"); 35 var right = document.getElementById("arrRight"); 36 37 var config = [ 38 { 39 "width": 400, 40 "top": 20, 41 "left": 50, 42 "opacity": 0.2, 43 "zIndex": 2 44 },//0 45 { 46 "width": 600, 47 "top": 70, 48 "left": 0, 49 "opacity": 0.8, 50 "zIndex": 3 51 },//1 52 { 53 "width": 800, 54 "top": 120, 55 "left": 200, 56 "opacity": 1, 57 "zIndex": 4 58 },//2 59 { 60 "width": 600, 61 "top": 70, 62 "left": 600, 63 "opacity": 0.8, 64 "zIndex": 3 65 },//3 66 { 67 "width": 400, 68 "top": 20, 69 "left": 750, 70 "opacity": 0.2, 71 "zIndex": 2 72 }//4 73 ]; //其實就是一個配置單 規定了每張圖片的大小位置層級透明度 74 75 //2. 當鼠標移入的時候，顯示左右按鈕 76 wrap.onmouseover = function(){ 77 animate(arrow,{"opacity":1}); 78 }; 79 wrap.onmouseout = function(){ 80 animate(arrow,{"opacity":0}); 81 }; 82 83 //其實就是一個配置單 規定了每張圖片的大小位置層級透明度 84 assige(); //先調用一下，讓原來的每一個li走到指定的位置 85 86 function assige(){ 87 for(var i=0;i<lis.length;i++){ 88 animate(lis[i],config[i],function(){ 89 flag = true; //在這裏變成true，也就是說前面的li都掃完完畢 了，都走到了配置文件中的指定位置 90 }); 91 } 92 } 93 94 var flag = true; //就表示當前的全部的li都走到了指定的位置 95 // 3. 點擊右側按鈕的時候 96 right.onclick = function(){ 97 if(flag){ 98 flag = false; 99 config.push(config.shift()); //將數組中的第一項刪除，添加到數組的最後 100 assige(); // 根據新生成的數組配置文件從新渲染每一個li 101 } 102 } 103 104 left.onclick = function(){ 105 if(flag){ 106 flag = false; 107 config.unshift(config.pop()); // 刪除數組中的最後一項，添加到數組的最前面 108 assige(); //根據新生成的配置文件數組，從新讓li走到指定的位置 109 } 110 }; 111 112 // 4. 添加節流閥(flag標識，讓每一個li渲染完畢以後才進行下一次操做，一直保持淡入淡出較慢的速度顯示) 113 } 114 </script> 115 </body> 116 </html>

以上結束（所用到的圖片以下，第一次寫）

實現效果以下：

---恢復內容結束---

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。