Use Require. js to encapsulate the implementation code of native js carousel images, require. jsjs
Index.html page:
<! DOCTYPE html>
The 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]; }; };});
The init. js code is as follows:
require(['slider'],function(mod){ mod.slide();});
The 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; // The width of the three images. length returns the number of characters in the string 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 ;});};};};});
The 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 | 'outgoing-out'; var count = parseInt (complete. dur/30); // The total number of times 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; // The number of current steps 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 'Allow-in ': var cur = start [name] + Math. pow (a, 3) * dis [name]; break; case 'timeout-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 section describes the use of Require. js encapsulates native js carousel images, hoping to help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!