<!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="https://www.jb51.net/require.js" data-main='init'></script> <!--<script type="text/javascript"> require(['slider'],function(mod){ mod.slide() }) </script>--> </head> <body> <div> <ul> <li><img src="https://www.jb51.net/images/1.jpg"/></li> <li><img src="https://www.jb51.net/images/2.jpg"/></li> </ul> <p> <span></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返回的是字符串中的字符数 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); //总次数 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); }; });