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="data:images/1.jpg"/></li>
　　　　　　<li><img src="data: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轮播图的更多相关文章

  1. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

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

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

  3. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  4. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  5. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  6. 原生js的懒人轮播图

    <style> body{ margin: 0; padding: 0px;}#carousel{ margin: auto; /* 居中 */ width: 600px; /* 设置宽度 ...

  7. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  8. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  9. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

随机推荐

  1. Android 如何本地加载pdf文件

    大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是,用户在app内下载好pdf文件后,不通过第三方的工具,本地打开. 这样的需求要怎么实现呢?上 ...

  2. 【响应式】foundation栅格布局的“尝鲜”与“填坑”

      提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...

  3. PHP count() 函数

    count() 函数计算数组中的单元数目或对象中的属性个数. 对于数组,返回其元素的个数,对于其他值,返回 1.如果参数是变量而变量没有定义,则返回 0.如果 mode 被设置为 COUNT_RECU ...

  4. Markdown - 语法简介

    标题 在文字里书写不同数量的“#”可以完成不同的标题,如下: # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 列表 无序列表的使用,在 ...

  5. bootstrap的常用组件和栅格式布局

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 因为Bootstrap需要jquery的支持,所以在使用Bootstrap之前要 ...

  6. 关于 vue.js 运行环境的搭建（mac）

    由于本人使用的是mac系统,因此在vue.js 的环境搭建上遇到许许多多的坑.感谢 showonne.yubang 技术指导,最终成功解决.下面是个人的搭建过程,权当是做个笔记吧. 由于mac非常人性 ...

  7. 使用java API操作HDFS-相关环境的设置

    用于装在编译类,即为hadoop的类路径 退出后重新登录,再使用env检查. jps可以直接使用了,表示已经设置成功. 在myclass之中创建类文件,这个myclass目录是自己创建的.

  8. OC语言中如何在便利构造器中利用便利初始化进行初始化

    因为利用便利初始化在便利构造器中进行初始化,所以要利用便利初始化的声明及实现部分,可与前篇做比较: 1. 主函数部分: 2. 接口部分: 3. 实现部分: 4. 打印结果: 感兴趣的朋友们可自己与前面 ...

  9. zen coding一个牛的不行的html和css开发工具

    zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...

  10. Html标签，file方式，上传文件

    恩,如果不记下来,记忆就会模糊掉. 希望自己下次看见这篇博客的时候,会解决掉疑问 ----------------------------------------------------------- ...