少写代码帮你模块化方法 & 运动框架 & 简化轮播图
模块化就是通过每一个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 ...
随机推荐
- idea中，使用facets添加完web后，项目已变为web项目，但web.xml中内容经常变为红色，并报错，如何解决？
这中错误经常是由于配置facets并添加完web后,没有进一步配置web.xml文件,导致web.xml是使用系统默认的. 如图:需要进一步配置web.xml文件,使用我们src/main/webap ...
- vue + eCharts 实现图表展示
一.首先安装 eCharts 依赖 npm install echarts -S 二.main.js 引入 eCharts 依赖 2.1)在 main.js 中引入 import echarts fr ...
- EasyUI+MVC4实现后台管理系统一：登陆和进入后台界面
首先实现登陆: 未完待续...
- etcd代理组件的开发思想
最近在一个项目中,需要使用到etcd集群来实现服务发现的功能,目的是统一管理相应的服务资源,同时也可对资源做一定的负载均衡策略.然而,项目中使用的技术栈是C++语言,github上没有合适的C++开源 ...
- Redis内核原理及读写一致企业级架构深入剖析1-综合组件环境实战
1 Redis 工作模型 redis实际上是个单线程工作模型,其拥有较多的数据结构,并支持丰富的数据操作,redis目前是原生支持cluster模式.如果需要缓存能够支持更复杂的结构和操作,基于以上原 ...
- thinkphp5实现文章上一篇，下一篇
写在控制器 //列表是按照根据id降序排列的,所以上一篇 $prv=Db::table('qy_article')->where('at_id','>',$at_id)->where ...
- 通过ps给透明通道的图片添加灰度（适用于需要兼容IE7，效果很好）
原始的图片是这样的 第一步: 第二步: 第三步: 第四步: 更多(文字居中): 1: 2: 3: 4:
- 7、kvm迁移操作
虚拟机迁移要确保虚拟机是关机状态. virsh shutdown privi-server virsh dumpxml privi-server > /etc/libvirt/qemu/priv ...
- ACM-ICPC 2018 沈阳赛区网络预赛 D. Made In Heaven（约束第K短路）
题意:求11到nn的第kk短的路径长度,如果超过TT输出Whitesnake!Whitesnake!,否则输出yareyaredawayareyaredawa. 好无以为 , 这就是一道模板题, 当是 ...
- P2062 分队问题(贪心orDP）
题目描述 给定n个选手,将他们分成若干只队伍.其中第i个选手要求自己所属的队伍的人数大等于a[i]人. 在满足所有选手的要求的前提下,最大化队伍的总数. 注:每个选手属于且仅属于一支队伍. 输入输出格 ...