jQuery焦点图插件改造为CMD模块

说明

之前写过一个jQuery的焦点图插件http://blog.csdn.net/qinshenxue/article/details/9199619，最近项目用到了seajs，为了符合模块开发的原则，把插件改造为CMD模块

演示

源码

html代码

<div id="banner" class="slider">
    <ul class="slider-box">
        <li style="background: url(/static/img/banner1.jpg) no-repeat center center"></li>
        <li style="background: url(/static/img/banner2.jpg) no-repeat center center"></li>
        <li style="background: url(/static/img/banner3.jpg) no-repeat center center"></li>
    </ul>
    <ul class="slider-nav">
        <li data-no="0"></li>
        <li data-no="1"></li>
        <li data-no="2"></li>
    </ul>
</div>

css代码

.slider{position:relative;overflow:hidden;width:100%;height:420px}
.slider-box{position:relative;margin:0;padding:0;list-style:none}
.slider-box li{position:absolute;top:0;left:0;display:none;margin:0;padding:0;width:100%;height:420px;list-style:none}
.slider-nav{position:relative;top:400px;display:table;margin:0 auto;padding:5px;list-style:none}
.slider-nav li{float:left;margin-right:3px;margin-left:3px;width:100px;height:8px;background:#ddd;text-align:center;font-size:12px;line-height:24px;cursor:pointer}
.slider-nav li.focus{background:#ff7f00}

js代码

define(function(require, exports, module) {
    var $ = require('jquery');
    var Slider = function(options) {
        var task;
        var no = 0;
        var defaults = {
            id : 'slider',
            changeSpeed : 4000, // 图片切换的间隔时间
            animateSpeed : 1000
        };
        $.extend(defaults, options);

        // 包含的图片
        var slider = $('#' + defaults.id);
        var items = slider.find('.slider-box li');
        var navs = slider.find('.slider-nav li');

        // 显示默认
        $(items[no]).show();
        $(navs[no]).addClass('focus');

        var focus = function() {
            $(items[no]).stop(true, true).fadeOut(defaults.animateSpeed);
            $(navs[no]).removeClass('focus');
        };

        var blur = function() {
            $(items[no]).stop(true, true).fadeIn(defaults.animateSpeed);
            $(navs[no]).addClass('focus');
        };

        slider.find('.slider-nav').on({
            click : function() {
                stop();
                focus();
                no = $(this).data('no');
                blur();
            },
            mouseenter:function(){
                stop();
            },
            mouseleave:function(){
                start();
            }
        }, 'li');

        var start = function() {
            task = setTimeout(function() {
                focus();
                no++;
                if (no == items.length) {
                    no = 0;
                }
                blur();
                start();
            }, defaults.changeSpeed);
        };

        // 终止循环
        var stop = function() {
            clearTimeout(task);
        };

        // 开始循环播放
        start();
    };

    module.exports = Slider;

});