原生js 實現旋轉木馬
阿新 • • 發佈：2021-11-14
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 src="common.js"></script> 8 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/slidepic3.jpg" alt=""/></a></li> 15 <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li> 16 <li><a href="#"><img src="images/slidepic2.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 <script> 27 function my$(id) { 28 return document.getElementById(id); 29 } 30 function animate(element,json,fn) { 31 clearInterval(element.timeId); 32 element.timeId=setInterval(function () { 33 var flag=true;//假設都達到了目標 34 for(var attr in json){ 35 if(attr=="opacity"){//判斷屬性是不是opacity 36 var current= getAttrValue(element,attr)*100; 37 //每次移動多少步 38 var target=json[attr]*100;//直接賦值給一個變數,後面的程式碼都不用改 39 var step=(target-current)/10;//(目標-當前)/10 40 step=step>0?Math.ceil(step):Math.floor(step); 41 current=current+step; 42 element.style[attr]=current/100; 43 }else if(attr=="zIndex"){//判斷屬性是不是zIndex 44 element.style[attr]=json[attr]; 45 }else{//普通的屬性 46 47 //獲取當前的位置----getAttrValue(element,attr)獲取的是字串型別 48 var current= parseInt(getAttrValue(element,attr))||0; 49 //每次移動多少步 50 var target=json[attr];//直接賦值給一個變數,後面的程式碼都不用改 51 var step=(target-current)/10;//(目標-當前)/10 52 step=step>0?Math.ceil(step):Math.floor(step); 53 current=current+step; 54 element.style[attr]=current+"px"; 55 } 56 if(current!=target){ 57 flag=false;//如果沒到目標結果就為false 58 } 59 } 60 if(flag){//結果為true 61 clearInterval(element.timeId); 62 if(fn){//如果使用者傳入了回撥的函式 63 fn(); //就直接的呼叫, 64 } 65 } 66 },10); 67 } 68 </script> 69 <script> 70 var config = [ 71 { 72 width: 400, 73 top: 20, 74 left: 50, 75 opacity: 0.2, 76 zIndex: 2 77 },//0 78 { 79 width: 600, 80 top: 70, 81 left: 0, 82 opacity: 0.8, 83 zIndex: 3 84 },//1 85 { 86 width: 800, 87 top: 100, 88 left: 200, 89 opacity: 1, 90 zIndex: 4 91 },//2 92 { 93 width: 600, 94 top: 70, 95 left: 600, 96 opacity: 0.8, 97 zIndex: 3 98 },//3 99 { 100 width: 400, 101 top: 20, 102 left: 750, 103 opacity: 0.2, 104 zIndex: 2 105 }//4 106 107 ]; 108 var flag = true;//假設所有的動畫執行完畢了---鎖 109 var list = my$("slide").getElementsByTagName("li"); 110 111 //1---圖片散開 112 function assign() { 113 for (var i = 0; i < list.length; i++) { 114 //設定每個li,都要把寬,層級,透明度,left,top到達指定的目標位置 115 animate(list[i], config[i], function () { 116 flag = true; 117 }); 118 } 119 } 120 121 assign(); 122 //右邊按鈕 123 my$("arrRight").onclick = function () { 124 if (flag) { 125 flag = false; 126 config.unshift(config.pop()); 127 assign(); 128 } 129 130 131 }; 132 //左邊按鈕 133 my$("arrLeft").onclick = function () { 134 if (flag) { 135 flag = false; 136 config.push(config.shift()); 137 assign();//重新分配 138 } 139 }; 140 //滑鼠進入,左右焦點的div顯示 141 my$("slide").onmouseover = function () { 142 animate(my$("arrow"), {"opacity": 1}); 143 }; 144 //滑鼠離開,左右焦點的div隱藏 145 my$("slide").onmouseout = function () { 146 animate(my$("arrow"), {"opacity": 0}); 147 }; 148 </script> 149 </body> 150 </html>
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 }a 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 }
本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15551093.html