【原创】jQuery插件之图片轮播

周末的时候写了一个图片轮播的jQuery插件，今天应产品的需求，又改进了些，所以写了两个版本slideshow.js和slideshow_v2.js;

代码中提供两个接口：

　　1. jQuery接口

　　2. CMD接口（相当于返回一个构造器），对外暴露包装后的public api（下面功能中说到）

 

那么实现的功能：

　　1，基本的的轮播功能：向前（prev）,向后（next），第一张（first），最后一张（last），指定图片索引（jumpto），向前（后）自动播放（play），停止播放（stop）

　　2. 关于图片的请求做了一些处理，每一个slideshow的大小都是通过参数自定义生成的，那么对于大量图片数据，处理的方式是这样的：

　　　　根据slideshow的实际宽度，算出并展示可视区域缩略图的个数，当点击至最后一个已下载缩略图时，才会下载另一批缩略图，并生成相应的dom。

　　　　同样的，对于预览图（中图），也是点击缩略图后才会进行请求。

　　3. 在视觉上做的是缩略图滚动，使选中的图片剧中显示。

 

效果图：

上面介绍的是第一个版本slideshow.js，在slideshow_v2.js上又有少许的改动，主要是在事件支持上：

1. 给缩略图添加mouseenter事件，减少用户使用成本（产品如是说）

2. 当鼠标放在左右箭头时，开始自动播放，移开停止自动播放，同样是为了减少用户适用成本（产品如是说）

 

针对slideshow.js和slideshow_v2.js，给出了两个demo分别是simple和complex。

以下是slideshow.js的源代码：

/**
 * @description 图片轮播jQuery插件
 * @file slideshow.js
 * @dep jquery
 * @author lovesueee@me.com
 * @version 2012-12-06
 */

define(['./slideshow.css'],function (require, exports, module) {

    var $ = require('./jquery.js');

    // Slide默认配置
    var SlideConfig = {

        start : 0,       // 起始图片的索引，从0开始

        interval : 0,    // 自动轮播的时间间隔，如果为0，表示不自动轮播，单位为秒

        repeat : true,  // 是否循环重复轮播

        width : 302,   // 组件宽度，如果为0，表示自由宽度

        viewHeight : 200,   // view视图高度

        navHeight : 53,     // navgation导航条高度

        arrWidth : 8,       // 导航箭头的宽度

        arrHeight : 20,       // 导航箭头的高度


        thumbWidth : 54,    // 缩略图的宽度

        data : {        // 图片数据

                sImgs : [],      // 小图
                mImgs : [],      // 中图
                bImgs : []       // 大图
        }

    };

    var SlideShow = function (options) {

        var $el;

        $el = options.$el;

        if ($el.length === 0) return;

        if ($el.length > 1) {

            $el.each(function () {
                $(this).slideShow(options);
            });

            return;
        }

        this.$el = $el;

        this.config = $.extend({}, SlideConfig, options);

        this.init();

    };

    SlideShow.prototype = {

        constructor : SlideShow,

        init : function () {

            var $el = this.$el;

            var config = this.config;

            var data = config.data

            var number = Math.min(data.sImgs.length, data.mImgs.length, data.bImgs.length);

            if (number === 0) throw new Error('number of images is zero');

            this.number = number;

            var current = config.start % number;

            this.current = -1;

            this.length = 0;

            var width = config.width;

            width !== 0 && $el.css('width', width);

            $el.addClass('gj-slide-show').css('visibility', 'hidden');

            this.createDom();

            this.jumpto(current);

            config.interval > 0 && this.play();

            $el.css('visibility', 'visible');

            return this;

        },

        createDom : function () {

            var $el = this.$el;

            var config = this.config;

            var $view = $('<div></div>');

            var $a = $('<a></a>');

            var $img = $('<img>');


            $a.attr({
                title : '查看大图',
                href : '#',
                target : '_blank'
            }).append($img);

            $view.append($a)
                .addClass('gj-slide-view')
                .css('height', config.viewHeight);



            var navHeight = config.navHeight;

            var arrWidth = config.arrWidth;

            var arrHeight = config.arrHeight;

            var top = Math.round((config.navHeight - 14) / 2 - arrHeight / 2);

            var $nav = $('<div></div>');

            var $larr = $('<div></div>');

            var $rarr = $('<div></div>');

            var $thumbs = $('<div></div>');

            var $ul = $('<ul></ul>');

            var $la = $('<a></a>');

            var $ra = $('<a></a>');

            $la.attr('href', '#')
                .css({
                    height : arrHeight,
                    width : arrWidth,
                    top : top
                });

            $larr.append($la)
                .addClass('gj-slide-forward gj-slide-arrow')
                .css('width', arrWidth);

            $ra.attr('href', '#')
                .css({
                    height : arrHeight,
                    width : arrWidth,
                    top : top
                });

            $rarr.append($ra)
                .addClass('gj-slide-backward gj-slide-arrow')
                .css('width', arrWidth);

            $ul.addClass('clear')
                .css('width',  (config.thumbWidth + 17) * this.number);

            $thumbs.append($ul)
                .addClass('gj-slide-thumbs')
                .css({
                    width : config.width - 2 * arrWidth - 9,
                    height : navHeight
                });

            $nav.append($larr)
                .append($thumbs)
                .append($rarr)
                .addClass('gj-slide-nav clear')
                .css('height', navHeight);

            $el.append($view).append($nav);


            var me = this;

            $la.on('click', function () {

                me.prev();

                return false;
            });

            $ra.on('click', function () {

                me.next();

                return false;
            });

            this.$ul = $ul;
            this.$img = $img;
            this.$a = $a;

            // 可视缩略图个数
            var visnum = this.visnum = Math.round($thumbs.width() / (config.thumbWidth + 16));
            // 缩略图移动的步数
            this.steps = 0;
            // 最大移动步数
            var maxsteps = this.maxsteps = this.number - visnum + 1;
            maxsteps < 0 && (this.maxsteps = 0);
            // 中间缩略图索引
            this.midIndex = Math.floor(visnum / 2);

            return this;
        },

        loadThumbs : function (num) {

            var sIndex, length;

            sIndex = length = this.length;

            var number = this.number;

            var config = this.config;

            (!num || num < this.visnum) && (num = this.visnum);

            var rest = number - length;

            num > rest && (num = rest);

            if (num === 0) return this;;

            var $ul = this.$ul;

            var data = config.data;

            var lIndex = sIndex + num;

            var me = this;

            for (var i = sIndex; i < lIndex; i++) {

                var $li = $('<li></li>');

                var $a = $('<a></a>');

                var $img = $('<img>');

                $img.attr('src', data.sImgs[i])
                    .css({
                        width : config.thumbWidth,
                        height : config.navHeight - 14
                    });

                $a.attr('href', '#')
                    .append($img);

                $li.addClass('gj-slide-thumb')
                    .attr('gj-side-index', i)
                    .append($a);

                $ul.append($li);

                $li.on('click', function () {

                    me.jumpto($(this).attr('gj-side-index'));

                    return false;

                });

                this[i] = $li;
            }

            this.length = length + num;

            return this;

        },

        play : function (interval) {

            var config = this.config;

            if (interval) {

                this.config.interval = interval;

            } else {

                interval = config.interval;
            }

            if (!interval) return this;

            var me = this;

            this.interval && this.stop();

            this.interval = window.setInterval(function () {

                me.next();

            }, interval * 1000);

            return this;
        },

        stop : function () {

            if (this.interval) {
                window.clearInterval(this.interval);
                delete this.interval;
            }

            return this;
        },

        prev : function () {

            this.jumpto(this.current - 1);

            return this;

        },

        next : function () {

            this.jumpto(this.current + 1);

            return this;
        },

        first : function () {

            this.jumpto(0);

            return this;
        },

        last : function () {

            this.jumpto(this.length - 1);

            return this;
        },

        jumpto : function (index) {

            var length = this.length;

            var number = this.number;

            var config = this.config;

            var data = config. data;

            // 是否循环重复轮播
            if (!config.repeat) {

                index < 0 && (index = 0);

                index >= number && (index = number -1);

                (index === 0 || index === number - 1) && this.interval && this.stop();

            } else {

                index = index % number;

                index < 0 && (index += number);

            }

            var num = index - length + 1;

            num > 0 && this.loadThumbs(num);

            var lastIndex = this.current;

            if (lastIndex === index) return this;
 
            this.current = index;

            var maxsteps = this.maxsteps;
            var steps = index - this.midIndex + this.steps;
            var step = 0;

            if (steps < 0) {
                step = steps;
                steps = 0;
            }

            if (steps > maxsteps) {
                step = steps - maxsteps;
                steps = maxsteps;
            }

            if (steps !== this.steps) {

                this.$ul.animate({
                    left : -steps * (config.thumbWidth + 16)
                });

                this.midIndex = index - step;
                steps > this.steps && (index + 1) % this.visnum === 0 && this.loadThumbs();
                this.steps = steps;
            }

            var lastEl = this[lastIndex];

            lastEl && lastEl.removeClass('select');

            this[index].addClass('select');

            this.$img.attr('src', data.mImgs[index]);
            this.$a.attr('href', data.bImgs[index]);

            return this;
        }
    };

    // jQuery接口
    $.fn.slideShow = function (options) {

        !options && (options = {});

        options.$el = this;

        new SlideShow(options);

        return this;
    };

    // CMD接口
    return function (options) {

        var el, $el;

        if (!options || !(el = options.el)) throw new Error('options.el is needed');

        $el = (el instanceof $) ? el : $(el);

        // 只对第一个元素进行处理
        options.$el = $el.length > 1 ? $($el[0]) : $el;

        var slide  = new SlideShow(options);

        // 公开API
        return {

            prev : slide.prev,

            next : slide.next,

            first : slide.first,

            last : slide.last,

            jumpto : slide.jumpto,

            play : slide.play,

            stop : slide.stop

        };
    };
});

 

over！！

欢迎指正错误~~