最近工作需要,就自己写了一个图片轮播插件,不过想到要集成到框架中,于是又用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>