1，只依赖与内部js 只需要传配置信息。
2，图片框架可以，根据图片宽高自动计算图片宽高，且这个功能可以开关，传入具体宽高也可以。
3.不依赖于任何库，全面兼容 ie6+ goole firfox.
4.图片延迟加载。
5.图片其实位置可以自设
6.左右箭头，下部文字提示可以，如模块一样卸载和加上。
7.图片是否自动播放开关。
8.图片是否循环播放，开关。
9，可以作为插件简单易用且结构样式易改造。
10.性能调优。
11图片信息添加和减少都以配置形式，快速反应需求变更。
12.为图片轮播时提供回调函数：分图片加载出前，和加载完成后，以对象数组形式，可以为单个图片轮播提供函数回调。
现在只写了一点点惭愧呀 后续慢慢完善：
html 页面：
<!DOCTYPE html> <html> <head> <title>ruby图片轮播插件</title> </head> <body> </body> <script type="text/javascript" src="rubypic.js"></script> <script> var runPlugin = new rubySlide(); </script> </html>
主要js：
/** * Created with JetBrains WebStorm. * User: Administrator * Date: 14-3-23 * Time: 下午4:46 * To change this template use File | Settings | File Templates. */ (function(w){ //************************分模块加载 start************************// var moudle = {}; function isFunction(obj) { return Object.prototype.toString.call(obj) === "[object Function]" ; } var define = function(name , fun){ if(moudle[name]){ throw new Error('moudle '+ name + 'has aleady been defined!'); }else{ moudle[name] = fun; } }; var require = function(name){ if(moudle[name] && isFunction(moudle[name])){ return moudle[name](); }else{ throw new Error('moudle ' + name +'is not defined'); } }; //************************分模块加载 end************************// /** * 常用的工具函数 */ define('Plugin/Tools',function(){ var tools ={ $ : function(id){ return document.getElementById(id); }, $$ : function(child , parent){ return parent.getElementsByTagName(child); }, extend : function(toObj , fromObj){ for( var key in fromObj){ toObj[key] = fromObj[key]; } } }; return tools; }); /** * 插件结构 */ /** * 插件入口 * @param obj 插件的配置信息 * @param contentId 插件展示的父亲id */ w.rubySlide = function(obj , contentId){ var pluginTools = require('Plugin/Tools'); var config = { imgArr : [],// 图片信息内容默认为空 每一张图片信息包括 rul：地址 desc：简介 startIndex : 0,//默认从第一种开始 width : false,//g规定的宽度 height : false,//规定的高度 loop : true,//是否循环播放 prev : true, //向左向右，上一张下一张 direction : 1,//1 表示向左右， 2 表示上下 autodisplay : true,//是否自动播放，false 则表示不自动播放 displayCurentNum : true,//是否显示 轮播到第几张图片的数字 nextCallBack : '',//运行下一张图片时候回调函数 startCallBack : '',//开始运行初始化时候回调函数 displayTime : 2000,//图片轮播速度 pauseTime : 2500,// 图片轮播停顿时间 prevCss : 'prev-css',//上一张下一张图片的样式 descCss : 'desc-css',//图片描述样式 numCss : 'imgnum-css',//第几张图片样式选择 imgDesc : true //图片文字介绍 }; if(obj){ //将配置信息载入 pluginTools.extend(config , obj); } console.log(config); }; })(window);