使用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 面向对象编程  function是方法(函数)
Sep 17 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
javascript常用功能汇总
2015/07/05 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
Python内置数据类型详解
2014/08/18 Python
Python实现两款计算器功能示例
2017/12/19 Python
python表格存取的方法
2018/03/07 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
《学会待客》教学反思
2014/02/22 职场文书
留学生求职信
2014/06/03 职场文书
焦点访谈观后感
2015/06/11 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
SQL注入详解及防范方法
2021/12/06 MySQL
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS