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


Posted in Javascript onJune 15, 2017

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轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
node.js入门教程
Jun 01 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 #Javascript
详解vue跨组件通信的几种方法
Jun 15 #Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 #Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 #Javascript
JS自动生成动态HTML验证码页面
Jun 14 #Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 #Javascript
详解AngularJS 模块化
Jun 14 #Javascript
You might like
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php实用代码片段整理
2016/11/12 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
Python素数检测的方法
2015/05/11 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Python创建临时文件和文件夹
2020/08/05 Python
学习Python需要哪些工具
2020/09/04 Python
《挑山工》的教学反思
2014/02/16 职场文书
纪检监察立案决定书
2015/06/24 职场文书
Java 数组的使用
2022/05/11 Java/Android