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. Spring事务隔离级别与传播机制详解，spring+mybatis+atomikos实现分布式事务管理

    原创说明:本文为本人原创作品,绝非他处转载,转账请注明出处 1.事务的定义:事务是指多个操作单元组成的合集,多个单元操作是整体不可分割的,要么都操作不成功,要么都成功.其必须遵循四个原则(ACID). ...

  2. jQuery修炼心得-DOM节点的插入

    1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...

  3. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  4. webService 下得 拦截

    当我们 对webservice 接口的 拦截 更具权限  来 判断 是否可以调用  一下是我的 一个demo 首先 我们写一个 拦截类 import javax.xml.soap.SOAPExcept ...

  5. 使用 Laravel 实现微型博客系统

    参考链接:An Introduction to Laravel Authorization Gates 这个微型博客系统包含两个用户角色(作者 和 编辑),它们的权限如下: 作者能创建博客 作者能更新 ...

  6. MongoDB副本集的搭建

    副本集是mongodb提供的一种高可用解决方案.相对于原来的主从复制,副本集能自动感知primary节点的下线,并提升其中一个Secondary作为Primary. 整个过程对业务透明,同时也大大降低 ...

  7. Facebook 宣布开源Python重写后的OnlineSchemaChange

    本文会简要介绍,OnlineSchemaChange在经历从PHP到Python重写后的改进和变化 文章欢迎转载,但转载时请保留本段文字,并置于文章的顶部 作者:卢钧轶(cenalulu) 本文原文地 ...

  8. <图论入门>邻接矩阵+邻接表

    非本人允许请勿转载. 趁热打铁,学会了邻接表把这个总结一下,以及感谢大佬uncle-lu!!!(奶一波)祝早日进队! 首先,图论入门就得是非常基础的东西,先考虑怎么把这个图读进去. 给定一个无向图,如 ...

  9. iframe框架的应用

    同学接私活,我写几个页面. 后台系统,点击侧栏菜单后,右边div的要显示对应的内容.就是说,没选一下左边的菜单,右边的内容都要变化. 这次首先尝试了一下Oldfasional办法--iframe框架. ...

  10. Hbuilder常用功能汇总

    引用 样式表: mui.min.css Js:mui.min.js 常用功能 获取页面 var webView=plus.webview.currentWebview();//获取当前页 var we ...