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. PHP原生DOM对象操作XML'代码'

    对于操作XML类型文件,PHP内置有一套DOM对象可以进行处理.对XML的操作,从创建.添加到修改.删除都可以使用DOM对象中的函数来进行. 创建 创建一个新的XML文件,并且写入一些数据到这个XML ...

  2. SQL注入详细介绍及如何防范SQL注入式攻击

    一. SQL注入攻击的简单示例. statement := "SELECT * FROM Users WHERE Value= " + a_variable + " 上面 ...

  3. Vue项目的部署

    通过vue-cli创建的工程,默认已经打好了基础,包含vue-loader webpack. 通常我们开发中,使用npm run dev进行开发,webpack会Hot reload,不用我们手动刷新 ...

  4. mysql数据库面试总结

    数据库优化 建表优化 1)数据库范式 l 第一范式(1NF):强调的是列的原子性,即列不能够再分成其他几列. 如电话列可进行拆分---家庭电话.公司电话 l 第二范式(2NF):首先是 1NF,另外包 ...

  5. maven命令更新子父项目的pom版本

    Q:一个maven项目,有多个子module,在顶级父pom.xml里设置<version>1.0.0-SHAPSHOT</version>,在子pom.xml里都用了 < ...

  6. Python dict 按键和值排序

    python 字典(dict)的特点就是无序的,按照键(key)来提取相应值(value),如果我们需要字典按值排序的话,那可以用下面的方法来进行:1 下面的是按照value的值从大到小的顺序来排序. ...

  7. 学习MVC之租房网站（九）-房源显示和搜索

    在上一篇<学习MVC之租房网站(八)- 前台注册和登录>完成了前台用户的注册.登录.重置密码等功能,然后要实现与业务相关的功能,包括房源的显示.检索等. 一 房源显示 房源显示内容较多,涉 ...

  8. 进制转换，杭电0j-2031

    进制转换,杭电0j-2031原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=2031 [Problem Description] 输入一个十进制数N,将它 ...

  9. centos永久修改主机名

    永久修改主机名 以上的修改只是临时修改,重启后就恢复原样了. 步骤1: 修改/etc/sysconfig/network中的hostname vi /etc/sysconfig/network HOS ...

  10. 大文件拆分问题的java实践（附源码）

    引子 大文件拆分问题涉及到io处理.并发编程.生产者/消费者模式的理解,是一个很好的综合应用场景,为此,花点时间做一些实践,对相关的知识做一次梳理和集成,总结一些共性的处理方案和思路,以供后续工作中借 ...