少写代码帮你模块化方法 & 运动框架 & 简化轮播图
模块化就是通过每一个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 ...
随机推荐
- R：安装、导入各种包。
library和require都可以载入包,但二者存在区别. #在一个函数中,如果一个包不存在,执行到library将会停止执行,require则会继续执行.require将会根据包的存在与否返回tr ...
- SPOJ-TTM To the moon
一句话题意:写一个支持区间修改,区间求和的可持久化数据结构. 考虑使用主席树,然而,区间修改怎么办? 似乎有标记永久化的方法. 对于线段树上完全覆盖标记产生贡献的区间,我们直接打上一个$tag$,而对 ...
- Windows使用Github
首先,你需要执行下面两条命令,作为 git 的基础配置,作用是告诉 git 你是谁,你输入的信息将出现在你创建的提交中. git config --global user.name "你的名 ...
- 微信小程序自学第五课：条件渲染、列表渲染
一.条件渲染 1. wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condi ...
- 将前台传回的HttpServletRequest转换成HashMap
import java.util.HashMap;import java.util.Map;import java.util.Map.Entry;import java.util.Set; impor ...
- 读取某文件夹下所有excel文件 python
import os import pandas as pd from sklearn import linear_model path = r'D:\新数据\每日收益率' filenames = os ...
- GoWeb开发_Iris框架讲解（三）：路由功能处理方式
Context概念 Context是iris框架中的一个路由上下文对象,在iris框架中的源码路径定义为:{$goPath}\github.com\kataras\iris\context\conte ...
- Cogs 1995. Yukari
1995. Yukari ★★☆ 输入文件:camera.in 输出文件:camera.out 简单对比时间限制:1 s 内存限制:128 MB 题目背景: 幻想乡的创始人之一,八云紫 ...
- bzoj4435: [Cerc2015]Juice Junctions（最小割树+hash）
传送门 首先最大流等于最小割,那么可以转化为最小割树来做(不知道什么是最小割树的可以看看这题->这里) 具体的做法似乎是$hash[i][j]$表示最小割为$i$时点$j$是否与$S$连通 然后 ...
- CSS布局那点事儿
布局 最开始老的一代网站开发,布局都是通过表格实现的. 这样可以形成规整的网格布局,但是也会带来一定的复杂性.比如想要新增某个页面元素,就有可能要改动整个表格,添加很多无用的行或者列. 后来,衍生出不 ...