结构-行为-样式-requireJs实现图片轮播插件
最近工作需要，就自己写了一个图片轮播插件，不过想到要集成到框架中，于是又用RequireJs改了一遍。
主要文件：
- style.css
- jquery-1.11.1.min.js
- require.js
- viewpager.js
- view.js
- index.html
viewpager.js:
define(['jquery'], function ($) {
function ViewPager(setting) {
var myset = {
index: 0
};
setting = $.extend({}, myset, setting);
this.init(setting);
};
ViewPager.prototype = {
init: function (s) {
this.id = s.id;
this.list = $("#" + s.id).find("li");
this.index = s.index;
this.isAuto = s.isAuto;
this.renderUI();
this.bindUI();
}
, renderUI: function () {
var inHtml = $('<div class="prev"><span class="prev_icon"></span></div><div class="next"><span class="next_icon"></span></div>');
//选择器到指定的ID
//inHtml.appendTo("body ul#viewpager");
$("#" + this.id).append(inHtml);
}
, bindUI: function () {
var that = this;
if (that.isAuto) {
setInterval(function () {
that.prev();
}, 3000);
}
$("#" + this.id).delegate(".prev", "click", function () {
that.prev();
});
$("#" + this.id).delegate(".next", "click", function () {
that.next();
});
}
, prev: function () {
$(this.list[this.index]).animate({
opacity: 'hide'
}, 500);
if (this.index < this.list.length - 1) {
this.index++;
this.picgo();
}
else {
this.index = 0;
this.picgo();
}
}
, next: function () {
$(this.list[this.index]).animate({
opacity: 'hide'
}, 500);
if (this.index > 0) {
this.index--;
this.picgo();
}
else {
this.index = this.list.length - 1;
this.picgo();
}
}
, picgo: function () {
$(this.list[this.index]).css({
"left": "0px"
});
$(this.list[this.index]).animate({
opacity: 'show'
}, 800);
}
};
return {
ViewPager: ViewPager
}
});
view.js
require.config({
paths: {
"jquery": "js/jquery-1.11.1.min"
, "viewpager": "js/viewpager"
, "abstract": "js/abstract"
}
});
require(['jquery', 'viewpager'], function ($, v) {
new v.ViewPager({
"id": "viewpager"
, "isAuto": true
});
new v.ViewPager({
"id": "viewpager1"
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Component Learn</title>
<link rel="stylesheet" href="http://mj-staples.blog.163.com/blog/css/style.css" type="text/css"> </head>
<body>
<div class="view-main">
<ul id="viewpager">
<li class="active"><img src="http://mj-staples.blog.163.com/blog/img/0.jpg" alt="0.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/1.jpg" alt="1.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/2.jpg" alt="2.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/3.jpg" alt="3.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/4.jpg" alt="4.jpg" /></li>
</ul>
</div>
<hr>
<div class="view-main">
<ul id="viewpager1">
<li class="active"><img src="http://mj-staples.blog.163.com/blog/img/0.jpg" alt="0.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/1.jpg" alt="1.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/2.jpg" alt="2.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/3.jpg" alt="3.jpg" /></li>
<li><img src="http://mj-staples.blog.163.com/blog/img/4.jpg" alt="4.jpg" /></li>
</ul>
</div>
<script type="text/javascript" data-main="view" src="http://mj-staples.blog.163.com/blog/js/require.js"></script>
</body>
</html>
结构-行为-样式-requireJs实现图片轮播插件的更多相关文章
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 推荐:图片轮播插件Nivo Slider
因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的. ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 图片轮播插件Nivo Slider
推荐:图片轮播插件Nivo Slider 因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...
- AdPlayBanner：功能丰富、一键式使用的图片轮播插件
AdPlayBanner:功能丰富.一键式使用的图片轮播插件 AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresc ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- 图片轮播插件-carouFredSel
carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...
随机推荐
- [译]Java 设计模式之原型
(文章翻译自Java Design Pattern: Prototype) 原型模式用于当当非常相似的对象频繁被需要的时候.原型模式克隆了对象并且设置变化的特征.这种方式会消耗更少的资源.考虑下为什么 ...
- WINHTTP的API接口说明
BOOL WINAPI WinHttpAddRequestHeaders( _In_ HINTERNET hRequest, _In_ LPCWSTR pwszHeaders, _In ...
- 我的Android 4 学习系列之Intent 和 Broadcast Reciever
目录 Intent 简介 使用隐式和显式Intent启动Activity.子Acitivity和Service 使用Linkify 使用Broadcast Intent 广播事件 使用 Pending ...
- 在C#中Color结构的各属性颜色对照表（转）
转自:http://blog.sina.com.cn/s/blog_454dc49501016q2p.html Color.AliceBlue 240,248,255 Color.LightSalmo ...
- 【转】【Android工具】被忽略的UI检视利器：Hierarchy Viewer
原文:http://blog.csdn.net/ddna/article/details/5527072 Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下, ...
- Android项目--Json解析
在过去的一段时间里,我希望做一个天气的应用,但是由于老版的天气接口已经不能用了.只能更新到2014年3月4日. 不过有些东西,哪来学习一下,也是可以的. 比如:http://m.weather.com ...
- 查询select
--------------select查询-------------------查询所有信息(方法一)select * from stuinfo --*号代表所有列--查询所有信息(方法二)sele ...
- 浅谈PHP在各系统平台下的换行符
<?php echo 'aaa\n';//用于linux.unix平台C的换行也是如此 echo 'bbb\r';//用于mac平台 echo 'ccc\r\n';//用于windows平台 / ...
- sql之T-SQL
sql之T-SQL 下面就T-SQL的几个方面来分别讲解一下. 1.变量 要动态的写sql语句,就不能没有变量. 声明变量并赋值: 1 declare @i as int;--定义一个 int 类 ...
- D5
今天的题目跟前几天的比起来简单了许多 由于T1没有开long long 所以T1全部WA掉了...只悲催的A了第二题 T1:多重背包 其实这一题我真心不会,DP各种弱,简直欲哭无泪... 不过认真的看 ...