[WEB插件]可左右与上下、可间隙与连续滚动的轮波控件

jquery的脚本代码（实现轮波的行为）{文件名:scroll.js}

(function($) {
    //声明wzjScroll构造函数
    $.wzjScroll = function(objScroll, options) { this.init(objScroll, options); };

    //给wzjScroll原型链添加对象
    $.extend($.wzjScroll.prototype, {
        settings: {
            cssContent: "flashContent",
            cssButton: "flashBtn",
            cssBtnActive: "btnActive",

            auto: null,
            speed: 200,
            easing: null,
            vertical: false,
            circular: true,
            visible: 3,
            scroll: 1,
            button: false,
            step: 1
        },

        $wrapper: null,

        $content: null,
        $contentUl: null,
        $contentLi: null,

        $buttons: null,
        $buttonUl: null,
        $buttonLi: null,

        animCss: null,
        sizeCss: null,
        size: null,
        liSize: null,
        running: false,
        active: null,

        visible: null,
        button: null,

        $prevBtn: null,

        init: function(objScroll, options) {
            this.$wrapper = $(objScroll);
            $.extend(this.settings, options);
            this.renderControls();
            this.setControls();
            this.wire();
        },

        renderControls: function() {
            var links = this.$wrapper.children("a");

            this.$contentUl = this.createListUI(links.length, links);
            this.$contentLi = $("li", this.$contentUl);
            this.$content = $("<div />").addClass(this.settings.cssContent).append(this.$contentUl);

            this.$wrapper.empty().append(this.$content);
            this.button = this.settings.button;
            if (this.button) {
                this.$buttonUl = this.createListUI(links.length);
                this.$buttonLi = $("li", this.$buttonUl);
                this.$buttons = $("<div />").addClass(this.settings.cssButton).append(this.$buttonUl);
                this.$prevBtn = $("li:first-child", this.$buttons).addClass(this.settings.cssBtnActive);
                this.$wrapper.append(this.$buttons);
            }
        },

        setControls: function() {
            //(true、纵向循环  false、横向旋转)
            if (this.settings.vertical) {
                this.animCss = "top";
                this.sizeCss = "height";
            }
            else {
                this.animCss = "left";
                this.sizeCss = "width";
            }

            var o = this.settings;
            var v = o.visible;
            this.visible = o.visible;

            this.size = this.$contentLi.size();                 //确定轮波数量
            if (o.circular) {
                this.$contentUl.prepend(this.$contentLi.slice(this.size - v).clone()).append(this.$contentLi.slice(0, v).clone());
            }
            this.$contentLi = $("li", this.$contentUl);
            this.size = this.$contentLi.size(); this.active = v;

            //设置容器关键样式
            this.$contentUl.css({ position: "relative", "list-style-type": "none", "z-index": "1" });
            this.$content.css({ overflow: "hidden", position: "relative", "z-index": "3" });

            //确定容器大小
            this.liSize = o.vertical ? this.height(this.$contentLi) : this.width(this.$contentLi);
            var ulSize = this.liSize * this.size;
            var divSize = this.liSize * v;      //显示窗口大小

            //确定波块大小
            this.$contentLi.css({ width: this.$contentLi.width(), height: this.$contentLi.height() })
                .css(o.vertical ? { display: "block"} : { float: "left" });

            this.$contentUl.css(this.sizeCss, ulSize + "px").css(this.animCss, -(this.liSize));
            this.$content.css(this.sizeCss, divSize + "px");
        },

        wire: function() {
            var self = this;
            var o = self.settings;

            //按钮切换
            if (this.button) {
                this.$buttonLi.hover(function() {
                    clearInterval(self.MyMar);
                    self.active = parseInt($(this).text());
                    self.go(self.active, 10);
                }, function() {
                    self.MyMar = setInterval(function() {
                        self.go(self.active + o.scroll);
                    }, o.auto + o.speed);
                });
            }

            //间隙滚动 与 连续滚动
            if (o.auto) {
                self.$contentLi.hover(function() {
                    self.running = true;
                }, function() {
                    self.running = false;
                });

                self.MyMar = setInterval(function() {
                    self.go(self.active + o.scroll);
                }, o.auto + o.speed);
            }
            else {
                self.MyMar = setInterval(function() { self.ylMarquee() }, o.step);
                self.$contentLi.hover(
                                function() { clearInterval(self.MyMar); },
                                function() { self.MyMar = setInterval(function() { self.ylMarquee() }, o.step); }
                        );
            }
        },

        go: function(to, speed) {
            var o = this.settings;
            var itemLength = this.size;
            var liSize = this.liSize;
            var $ul = this.$contentUl;
            var v = this.visible;

            if (!this.running) {
                if (o.circular) {
                    if (to <= v - 1) {
                        $ul.css(this.animCss, -((itemLength - (v * 2)) * liSize) + "px");
                        this.active = to == v - 1 ? itemLength - (v * 2) - 1 : itemLength - (v * 2) - o.scroll;
                    } else if (to >= itemLength - v + 1) {
                        $ul.css(this.animCss, -((v) * liSize) + "px");
                        this.active = to == itemLength - v + 1 ? v + 1 : v + o.scroll;
                    } else this.active = to;

                    if (this.button) {
                        if (this.$prevBtn) { this.$prevBtn.removeClass() };
                        var index = this.active <= itemLength - (v * 2) ? this.active - v : 0;
                        this.$prevBtn = $("li:eq(" + index + ")", this.$buttons).addClass(o.cssBtnActive);
                    }
                } else {
                    if (to < 0 || to > itemLength - v) return;
                    else this.active = to;
                }

                if (!speed) speed = o.speed;
                $ul.animate(
                            this.animCss == "left" ? { left: -(this.active * liSize)} : { top: -(this.active * liSize) }, speed, o.easing
                    );
            }
            return false;
        },

        css: function(el, prop) {
            return parseInt($.css(el[0], prop)) || 0;
        },
        width: function(el) {
            return el[0].offsetWidth + this.css(el, 'marginLeft') + this.css(el, 'marginRight');
        },
        height: function(el) {
            return el[0].offsetHeight + this.css(el, 'marginTop') + this.css(el, 'marginBottom');
        },

        createListUI: function(count, array) {
            var $list = $("<ul/>");
            for (j = 0; j < count; j++) {
                var $li = $("<li/>");
                if (array) { $li.append(array[j]); }
                else $li.html(j + 1);
                $list.append($li);
            }
            return $list;
        },

        ylMarquee: function() {
            var o = this.settings;
            var ulSize = this.liSize * (this.size - this.visible * 2) + 1;

            if (!o.vertical) {
                if (this.$content.scrollLeft() >= ulSize) {
                    this.$content.scrollLeft(0);
                }
                else {
                    var leftNum = this.$content.scrollLeft();
                    leftNum += parseInt(o.step);
                    this.$content.scrollLeft(leftNum)
                }
            }

            if (o.vertical) {
                if (this.$content.scrollTop() >= ulSize) {
                    this.$content.scrollTop(0);
                }
                else {
                    var topNum = this.$content.scrollTop();
                    topNum += parseInt(o.step);
                    this.$content.scrollTop(topNum);
                }
            }
        }
    });

    $.fn.wzjScroll = function(options) {
        new $.wzjScroll(this, options);
    };
}
        )(jQuery);

Css代码{文件名：scroll.css}

*{}{margin:0; padding:0;}
img{}{border: 0px;display: block; }

#flashShow, #flashShow .flashContent, #flashShow .flashContent img{}{width:253px; height:255px}
#flashShow{}{position:relative;}
#flashShow .flashBtn {}{z-index:10; position:absolute; right:0px; bottom:0px; background-color: Black;}
#flashShow .flashBtn li{}{cursor: pointer;float: left;display:inline; width:25px; text-align:center; color:pink; font-size:11px;}
#flashShow .flashBtn .btnActive{}{background-color:White;}
#flashShow .flashContent{}{position:absolute; z-index:3;}

Html代码

---

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" href="scroll.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="flashShow">
        <a href="#" title="">
            <img src="controls/scroll/pic_01.jpg" alt="" /></a> <a href="#" title="">
                <img src="controls/scroll/pic_02.jpg" alt="" /></a> <a href="#" title="">
                    <img src="controls/scroll/pic_03.jpg" alt="" /></a>
    </div>
    </form>

    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
    <script src="scroll.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
   //      $("#flashShow").wzjScroll({ auto: 3000, speed: 1000, visible: 1, vertical: true, button: false });
           $("#flashShow").wzjScroll({ auto: 3000, speed: 1000, visible: 1, vertical: false, button: true });
        })
    </script>
</body>
</html>

---

注意设置下Html中的图片路径，及CSS样式中的图片尺寸。其实使用还是相当方便的，样式中都可以放入背景图片。增加一张图片脚本会自动生成数字编号。
最后显示效果如下：