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輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
