使用Require.js封装原生js轮播图的实现代码
2017-06-15 10:17
981 查看
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返回的是字符串中的字符数 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); }; });
以上所述是小编给大家介绍的使用Require.js封装原生js轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 用原生JS实现一个轮播(包含全部代码和详细思路)
- 原生JS实现焦点轮播图 完整代码
- 图片轮播系列1-旋转木马(使用JS原生数组方式实现)
- js原生代码实现轮播图的实例讲解
- 使用原生js实现页面蒙灰(mask)效果示例代码
- JS原生代码实现轮播图(无左右滑动,底下圆点按钮)
- JS原生代码实现图片轮播无缝切换的一种思路
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- 原生js实现移动端触摸轮播的示例代码
- 原生js实现轮播图的示例代码
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- 原生js封装二级城市下拉列表的实现代码
- 使用原生js实现页面蒙灰(mask)效果示例代码
- CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码(图片轮播效果一)
- 原生js图片轮播效果实现代码
- node.js require 实现机制初窥;pomelo代码分析5----------- pomel-loader模块
- JS类的封装及实现代码
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- 使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求