您好,登錄后才能下訂單哦!
小編給大家分享一下如何使用Require.js封裝原生js輪播圖,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
index.html頁面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封裝輪播圖</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; height: 440px; border: solid 1px; margin: 50px auto; position: relative; overflow: hidden; } #banner ul{ position: absolute; left: 0; top: 0; } #banner ul li{ width: 830px; height: 440px; float: left; } #banner p{ position: absolute; left: 50%; bottom: 10px; margin-left: -30px; } #banner p span{ display: block; float: left; width: 15px; height: 15px; margin-right: 6px; background: #ccc; border-radius: 50%; } #banner p .on{ background: red; } </style> <script type="text/javascript" src="require.js" data-main='init'></script> <!--<script type="text/javascript"> require(['slider'],function(mod){ mod.slide() }) </script>--> </head> <body> <div id="banner"> <ul> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> </ul> <p> <span class="on"></span> <span></span> <span></span> </p> </div> </body> </html>
get.js代碼如下:
define(function(require,exports,module){ exports.getStyle = function (obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; }; }; });
init.js代碼如下
require(['slider'],function(mod){ mod.slide(); });
slider.js代碼如下
define(function(require, exports, module) { var move = require('StartMove'); var aBtn = document.getElementById('banner').getElementsByTagName('span'); var oUl = document.getElementById('banner').getElementsByTagName('ul')[0]; var aLi = oUl.children; //三張圖片所占的寬度,length返回的是字符串中的字符數(shù) oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px'; exports.slide = function() { for(var i = 0; i < aBtn.length; i++) { aBtn[i].index = i; aBtn[i].onclick = function() { for(var i = 0; i < aBtn.length; i++) { aBtn[i].className = ''; } aBtn[this.index].className = 'on'; move.move(oUl, { left: -this.index * aLi[0].offsetWidth; }); }; }; }; });
StartMove.js代碼如下
define(function(require, exports, module) { var get = require('get'); exports.move = function move(obj, json, complete) { clearInterval(obj.timer); var complete = complete || {}; complete.dur = complete.dur || 1000; complete.easing = complete.easing || 'ease-out'; var count = parseInt(complete.dur / 30); //總次數(shù) var start = {}; //{width:300,height:300} var dis = {}; //{width:300,height:300} for(var name in json) { start[name] = parseFloat(get.getStyle(obj, name)); dis[name] = json[name] - start[name]; } var n = 0; //當(dāng)前步數(shù) obj.timer = setInterval(function() { n++; for(var name in json) { var a = n / count; switch(complete.easing) { case 'linear': var cur = start[name] + a * dis[name]; break; case 'ease-in': var cur = start[name] + Math.pow(a, 3) * dis[name]; break; case 'ease-out': var a = 1 - n / count; var cur = start[name] + (1 - Math.pow(a, 3)) * dis[name]; break; }; if(name == 'opacity') { obj.style[name] = cur; obj.style.filter = 'alpha(' + cur * 100 + ')'; } else { obj.style[name] = cur + 'px'; }; }; if(n == count) { clearInterval(obj.timer) complete.fn && complete.fn(); }; }, 30); }; });
看完了這篇文章,相信你對“如何使用Require.js封裝原生js輪播圖”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。