使用Require.js封装原生js轮播图的实现代码

2024-02-19 19:00:03 289

require.js封装轮播图 *{ margin:0; padding:0; list-style:none; } #banner{ width:830px; height:440px; border:solid1px; margin:50pxauto; position:relative; overflow:hidden; } #bannerul{ position:absolute; left:0; top:0; } #bannerulli{ width:830px; height:440px; float:left; } #bannerp{ position:absolute; left:50%; bottom:10px; margin-left:-30px; } #bannerpspan{ display:block; float:left; width:15px; height:15px; margin-right:6px; background:#ccc; border-radius:50%; } #bannerp.on{ background:red; }

define(function(require,exports,module){ varmove=require('StartMove'); varaBtn=document.getElementById('banner').getElementsByTagName('span'); varoUl=document.getElementById('banner').getElementsByTagName('ul')[0]; varaLi=oUl.children; //三张图片所占的宽度，length返回的是字符串中的字符数 oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'; exports.slide=function(){ for(vari=0;i

StartMove.js代码如下

define(function(require,exports,module){
varget=require('get');
exports.move=functionmove(obj,json,complete){
clearInterval(obj.timer);
varcomplete=complete||{};
complete.dur=complete.dur||1000;
complete.easing=complete.easing||'ease-out';
varcount=parseInt(complete.dur/30);//总次数
varstart={};//{width:300,height:300}
vardis={};
//{width:300,height:300}
for(varnameinjson){
start[name]=parseFloat(get.getStyle(obj,name));
dis[name]=json[name]-start[name];
}
varn=0;//当前步数
obj.timer=setInterval(function(){
n++;
for(varnameinjson){
vara=n/count;
switch(complete.easing){
case'linear':
varcur=start[name]+a*dis[name];
break;
case'ease-in':
varcur=start[name]+Math.pow(a,3)*dis[name];
break;
case'ease-out':
vara=1-n/count;
varcur=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轮播图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

使用Require.js封装原生js轮播图的实现代码

热门推荐

随机推荐