jQuery焦点图插件编写

       无图无真相，各种类型的网站基本上都会用到焦点图。

       以前在做网站的时候，基本上都无可避免的用到了焦点图，然而碍于时间、技术能力、兼容性等因素，只得去网上找一些广泛使用的焦点图插件，但是用的时候也无可避免的会出现很多问题，比如与其他插件冲突、使用不方便等问题。

       近来无事，也是为了巩固一下jQuery的知识，自己动手写了一个jQuery焦点图的插件，效果如图。

       插件是基于jQuery编写的，因此在兼容性上同jQuery。

       其实焦点图的原理很简单，可以用下面的图来表示。

       下面先把代码放上来（jquery-QuinnSlideshow-1.0.js）。

;
(function ($) {
    $.fn.QuinnSlideshow = function (_config) {


        var _default = {
            speed:3000,
            animateSpeed:500,
            boxStyle: {
                "width": "500px",
                "height": "300px",
                "overflow": "hidden",
                "position": "relative"
            },
            btnEnable: true,
            btnEnableClick: true,
            btnType: "number",
            btnFocusNo: 0,
            btnBottom: "5px",
            btnRight: "2px",
            btnStyle: {
                "float": "left",
                "width": "20px",
                "height": "20px",
                "background": "#fff",
                "line-height": "20px",
                "text-align": "center",
                "font-size": "12px",
                "margin-right": "3px",
                "color": "#aaa",
                "cursor": "default"
            },
            btnFocusStyle: {
                background: "#FF5C00",
                "color": "#fff"
            }
        };


        $.extend(true,_default,_config)
        this.css(_default.boxStyle);
        var me = this, meId = me.attr("id"), liCount = me.children().children().length, boxWidth = me.width();
        var slideBox, slideBoxInner, slideInterval, focusNo = _default.btnFocusNo;




        slideBox = $("<div id='" + meId + "_slideBox'>");
        slideBox.css(_default.boxStyle);
        slideBoxInner = $("<div id='" + meId + "_slideBoxInner'>");
        slideBoxInner.css({"width": "10000%"}); // 尽量大，以保证图片在一行上
        me.children().css({
            "float": "left",
            "margin": 0,
            "padding": 0,
            "position": "relative",
            "list-style": "none"
        }).appendTo(slideBoxInner).children().css({
                "float": "left",
                "width": _default.boxStyle.width,
                "height": _default.boxStyle.height
            }).children().css({
                "width": _default.boxStyle.width,
                "height": _default.boxStyle.height,
                "border": 0
            });


        // 复制一份
        slideBoxInner.children().clone().appendTo(slideBoxInner);
        slideBox.append(slideBoxInner);


        me.append(slideBox);




        if (_default.btnEnable) {
            var ulBtn = $("<ul>");
            ulBtn.css({
                "position": "absolute",
                "padding": 0,
                "margin": 0,
                "bottom": _default.btnBottom,
                "right": _default.btnRight,
                "list-style": "none"
            });


            for (var i = 0; i < liCount; i++) {
                var liBtn = $("<li no=" + i + " id='" + meId + "_btn" + i + "' >" + (i + 1) + "</li>");
                liBtn.css(_default.btnStyle);
                if (_default.btnEnableClick) {
                    liBtn.click(function () {
                        clearInterval(slideInterval);
                        slideBox.clearQueue();
                        var no = parseInt($(this).attr("no"));
                        btnBlur(focusNo);
                        focusNo = no;
                        btnFocus(focusNo);
                        slideBox.animate({
                            "scrollLeft": focusNo * me.width()
                        }, _default.animateSpeed);
                        slideShow();
                    });
                }
                ulBtn.append(liBtn);
            }


            me.append(ulBtn);
            // 默认焦点
            $("#" + meId + "_btn" + focusNo).css(_default.btnFocusStyle);


            function btnFocus(_focusNo) {
                // 如果等于图片的数量时，实际上这时候显示的是第一张，序号即0
                _focusNo = (_focusNo == liCount) ? 0 : _focusNo
                $("#" + meId + "_btn" + _focusNo).css(_default.btnFocusStyle);
            }


            function btnBlur(_focusNo) {
                _focusNo = (_focusNo == liCount) ? 0 : _focusNo
                $("#" + meId + "_btn" + _focusNo).css(_default.btnStyle);
            }


            function slideShow() {
                slideInterval = setInterval(function () {
                    btnBlur(focusNo);
                    focusNo++;
                    if (focusNo == liCount + 1) {
                        focusNo = 1;
                        // scrollLeft设为0，保证动画的延续性
                        slideBox.scrollLeft(0);
                    }
                    btnFocus(focusNo);
                    slideBox.animate({
                        "scrollLeft": focusNo * me.width()
                    }, _default.animateSpeed)
                }, _default.speed);
            }
            slideShow();
        }




    };
})(jQuery);

       其中最核心的代码就是slideShow()， 下面把demo页面代码的放上来

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="jquery-QuinnSlideshow-1.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#QuinnSlideshow").QuinnSlideshow({});
        });

    </script>
</head>
<body>

<div id="QuinnSlideshow">
    <ul>
        <li><img src="1.jpg" alt="1"/></li>
        <li><img src="2.jpg" alt="2"/></li>
        <li><img src="3.jpg" alt="3"/></li>
        <li><img src="4.jpg" alt="4"/></li>
        <li><img src="5.jpg" alt="5"/></li>

    </ul>
</div>
</body>
</html>

       我在写插件的时候有个原则，那就是最少依赖，因此在上面的插件的代码中可以发现大量的CSS的代码，这样我们在引用的时候就不需要再引入CSS文件了，另外全部的样式都是可以外部配置的。