用require.js封装原生js轮播图
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轮播图的更多相关文章
- js原生实现轮播图效果(面向对象编程)
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 原生js的懒人轮播图
<style> body{ margin: 0; padding: 0px;}#carousel{ margin: auto; /* 居中 */ width: 600px; /* 设置宽度 ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
随机推荐
- 树莓派安装ubuntu-server,配置镜像,安装python/mysql/samba记录
目标: 1/在raspberrypi 3B上安装ubuntu-server 2/配置好python/mysql/samba等服务,实现爬虫稳定运行我的硬件准备: 1/raspberrypi 3B 2/ ...
- 在Delphi下使用迅雷APlayer组件进行免注册开发
之前都是用的delphi下的dspack进行的视频开发,这个组件其实很好用,就是找解码器麻烦点,而且还得在客户的计算机上使用RegSvr32.exe也注册解码器,要不有可能播放不了. 结果在查找合适的 ...
- 【算法系列学习】DP和滚动数组 [kuangbin带你飞]专题十二 基础DP1 A - Max Sum Plus Plus
A - Max Sum Plus Plus https://vjudge.net/contest/68966#problem/A http://www.cnblogs.com/kuangbin/arc ...
- Eclipse 如何添加Window Builder插件?
http://www.eclipse.org/windowbuilder/download.php 找到对应版本的window builder 如果不知道版本的话,可以在你的Eclipse-help- ...
- ueditor 文件上传的分析和总结
正式开始之前,先写两个常用又容易被我忘掉的文件和流相互转化的方法. 1,文件转流 FileStream fs = new FileStream(filename,FileMode.Open,FileA ...
- Day2 Python的运算符及三大语句控制结构
Python的运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 Python的三大语句控制结构: ...
- scala和java的区别
scala写程序跟说话一样,都是要把你的思想描述出来,但是scala最大的问题是api的符号标记太复杂, 很多都好难看懂,某些语法太过复杂,上手还是有些难度的.java很规范,但是代码太多,写逻辑很 ...
- vue2.0实践 —— Node + vue 实现移动官网
简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...
- Eclipse Java 关联源码
今天打代码的时候打算看看Java的源码是怎么实现的 没想到还没关联源码 遇到上面的情况只需要关联下源码就可以对着方法按F3查看JAVA的开源代码. 解决上面如下: 找到jdk的安装目录 找到src.z ...
- 微信小程序demo
微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...