Home > Article > Web Front-end > Summarize the example tutorial of using Require.js to encapsulate the native js carousel chart
This article mainly introduces the implementation code of using Require.js to encapsulate the native js carousel chart. Friends who need it can refer to the
index.html page:
<!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> <p 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> </p> </body> </html>
get.js code is as follows:
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 code is as follows
require(['slider'],function(mod){ mod.slide(); });
slider.js code is as follows
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返回的是字符串中的字符数 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 code is as follows
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); //总次数 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; //当前步数 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); }; });
The above is the detailed content of Summarize the example tutorial of using Require.js to encapsulate the native js carousel chart. For more information, please follow other related articles on the PHP Chinese website!