少写代码帮你模块化方法 & 运动框架 & 简化轮播图
模块化就是通过每一个js里封装一个方法：用exports将他输出， 在下一个js用require的方法加载js时就会将方法输出。然后在主页面引入require.js;
模块化基本写法：
define(function(require,exports,module){
})
require:加载一个模块，后面跟的是一个js文件名
exports:输出
module:模块
举一个例子：
第一个js文件 ,get.js:
define(function(require,exports,module){
//将封装的这个函数，作为要输出的一个方法：其封装函数是用来返该元素所对应的属性的值。
exports.getStyle = function (obj,name){
//if判断考虑的是兼容的问题
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
})
第二个文件：StarMove.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)
}
})
第三个js文件 slide.js
define(function (require,exports,module){
var move = require('StartMove');
var aBtn = document.getElementById('banner').getElementsByTagName('span');
var oUl = document.getElementById('banner').getElementsByTagName('ul')[];
var aLi = oUl.children;
//三张图片所占的宽度，length返回的是字符串中的字符数
oUl.style.width = aLi.length*aLi[].offsetWidth+'px';
exports.slide = function(){
for(var i=;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
for(var i = ;i<aBtn.length;i++){
aBtn[i].className ='';
}
aBtn[this.index].className = 'on';
move.move(oUl,{left:-this.index*aLi[].offsetWidth});
}
}
}
})
第四个js文件 init.js
require(['slider'],function(mod){
mod.slide()
})
主页面 banner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
list-style: none;
}
#banner{
width: 830px;
height: 440px;
border: solid 1px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#banner ul{
position: absolute;
left: ;
top: ;
/*width: 2490px;
height: 440px;
overflow: hidden;*/
}
#banner ul li{
width: 830px;
height: 440px;
float: left;
}
#banner p{
position: absolute;
left: %;
bottom: 10px;
margin-left: -30px;
}
#banner p span{
display: block;
float: left;
width: 15px;
height: 15px;
margin-right: 6px;
background: #ccc;
border-radius: %;
}
#banner p .on{
background: red;
}
</style>
<script type="text/javascript" src="require.js"></script> </head>
<body>
<div id="banner">
<ul>
<li><img src="data:images/1.jpg"/></li>
<li><img src="data:images/2.jpg"/></li>
<li><img src="data:images/3.jpg"/></li>
</ul>
<p>
<span class="on"></span>
<span></span>
<span></span>
</p>
</div>
</body>
</html>
就会完成一个用模块化封装的轮播图：
要注意require的使用方法
少写代码帮你模块化方法 & 运动框架 & 简化轮播图的更多相关文章
- 【原】运动版的轮播图，有左右按钮和单独分页，原生JS版
运动版的轮播图,有左右按钮和单独分页 这个例子重点在于: 运动框架的复习,要灵活运动回调函数 始终以全局变量iNum来控制oUl的移动目的地,每次有任何动作,都是先判断iNum并改变iNum后去调用运 ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- mpvue微信小程序怎么写轮播图，和官方微信代码的差别
目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作. 那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了: 官方代码: <swiper indicat ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 授人以渔式解析原生JS写轮播图
需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...
- iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
随机推荐
- warning no newline at the end of file
main.c :10:2 warning: no newline at the end of file 修复这个警告,在文件结尾回车一下就行了.可以很少会有人去仔细探究,为什么gcc会给出这么一个警告 ...
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第五篇（用户管理之“用户权限分配”）
一.在做权限分配之前,首先先了解“ZTree”这个插件,我的这个系统没有用Jquery-EasyUI的Tree.用的是”ZTree“朋友们可以试试,也很强大.点击下载ZTree插件. 1. ...
- jquery.pagination.js数据无刷新真分页
定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...
- ProtoBuf练习（二）
重复数据类型 protobuf语言的重复字段类型相当于C++的std::list数据类型 工程目录结构 $ ls proto/ TServer.proto TSession.proto proto文件 ...
- Mysql索引优化1
Btree索引和哈希索引(索引是一种数据结构,提高查询,排序,分组速度) Btree索引的数据结构是平衡二叉树,时间复杂度为lgN 哈希索引的数据结构是一个Hash函数,时间复杂度为O(1),数据输入 ...
- 微信H5支付----报undened index openid
1.检查传过来的订单号是否是恒定不变的 2.检查总价是否为整数(微信要求订单金额是整数).以及不能为0 以下是这次错误的具体原因: 主要是前面读取的金额数据需要读取接口的,而不是数据库的(接口读取的是 ...
- 2018宁夏邀请赛G（DFS，动态规划【VECTOR<PAIR>】）
//代码跑的很慢四秒会超时,结尾附两秒代码(标程) #include<bits/stdc++.h>using namespace std;typedef long long ll;cons ...
- bzoj 3944: Sum（杜教筛）
3944: Sum Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 4930 Solved: 1313[Submit][Status][Discuss ...
- mui 上拉加载更多的使用
最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...
- 为CentOS下的Docker安装配置python3【转】
* 安装python3以及docker yum install docker docker pull centos service docker start systemctl enable dock ...