给自己，这周一个任务，完成一个组件化的图片轮播效果

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>

View Code

主要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);

View Code

ruby前端观察