模块化就是通过每一个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的使用方法

少写代码帮你模块化方法 & 运动框架 & 简化轮播图的更多相关文章

  1. 【原】运动版的轮播图，有左右按钮和单独分页，原生JS版

    运动版的轮播图,有左右按钮和单独分页 这个例子重点在于: 运动框架的复习,要灵活运动回调函数 始终以全局变量iNum来控制oUl的移动目的地,每次有任何动作,都是先判断iNum并改变iNum后去调用运 ...

  2. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  3. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  4. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  5. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  6. mpvue微信小程序怎么写轮播图，和官方微信代码的差别

    目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作. 那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了: 官方代码: <swiper indicat ...

  7. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  8. 授人以渔式解析原生JS写轮播图

    需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...

  9. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

随机推荐

  1. [51nod1267]4个数和为0(预处理+双指针)

    题意:判断能否从序列中找出4个数的和为0. 解题关键:n^2预处理任意两个数的和,sort一下,双指针进行判定. 此解法尚存在一个问题,就是左右枚举的时候如果相同的有许多的时候该左边移动还是右边移动 ...

  2. [HDU1711]KMP模板

    解题关键:1.直接套kmp模板即可,注意最后输出的位置,需要在索引的位置+1. 2.next用作数组名在oj中会编译错误, 3.选用g++,只有g++才会接受bits/stdc++.h OJ中g++和 ...

  3. 报错:Caused by: org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assigned before calling save(): cn.itcast.bos.domain.base.SubArea

    因为 实体类中的主键 是String类型 不能自动为其分配id  所以需要手动设置在service层   model.setId(UUID.randomUUID().toString());

  4. R语言最好的IDE——RStudio

    转自http://www.dataguru.cn/article-1602-1.html 看到很多的R语言教材,介绍的编辑器或者IDE都是很简陋的那些,就没有见到有人提到RStudio.对于不使用Em ...

  5. 《精通Spring4.X企业应用开发实战》读后感第六章（容器事件）

  6. Struts2学习第六课 实现登录登出功能

    关于Struts2请求的扩展名问题: 1).org.apache.struts2包下的default.properties中配置了struts2应用的一些常量 2).struts.action.ext ...

  7. 第三周作业-课本&&视频学习

    <网络攻防技术与实践>第三周作业 Part I 寻找自己留在互联网上的足迹并消除隐私 1.1 google/baidu搜索自己的qq号 搜索结果如图,搜到的有用信息其实就是图上这么几条,能 ...

  8. CRM 客户关系管理系统

    CRM(Customer Relationship Manager)客户关系管理系统 企业为提高核心竞争力,利用相应的信息技术以及互联网技术协调企业与顾客间在销售.营销和服务上的交互,从而提升其管理方 ...

  9. vue 绑定属性（index）

    <el-menu-item v-for="item in links" :key="item.id" v-bind:index="item.id ...

  10. Reboot

    目标是将浏览器的预设样式设为一致 Native font stack  本机字体堆栈 由于padding 及 border 会改变元素在运算后的宽度 此时的实际宽度为: width+左右padding ...