腾讯微云首页jquery焦点图

腾讯微云首页jquery焦点图是一款带有索引按钮，淡入淡出，自动轮播切换效果的jquery焦点图代码。
引用css
 <link rel="stylesheet" href="css/reset.css" media="screen">
    <link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">
html代码
<div class="wrapper">
        <div class="wy-content">
            <div class="wy-mod-banner">
                <div id="_banners" class="banners">
                    <div class="banner banner4">
                        <img src="images/banner4.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
                        </div>
                    </div>
                    <div class="banner banner3">
                        <img src="images/banner3.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
                        </div>
                    </div>
                    <div class="banner banner2">
                        <img src="images/banner2.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
                        </div>
                    </div>
                    <div class="banner banner1">
                        <img src="images/banner1.jpg" alt="微云，生活精彩">
                        <div class="info">
                            <h3>微云，生活精彩</h3>
                            <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
                            <a href="/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载</span> <i class="bor_c"></i></a>
                        </div>
                    </div>
                </div>
                <div id="_focus" class="focus">
                    <a data-index="0" href="#" class="on">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>
                    <a data-index="1" href="#">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>
                    <a data-index="2" href="#">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>
                    <a data-index="3" href="#">
                        <span class="bg-b"></span>
                        <span class="inner"></span>
                    </a>     
                </div>
            </div>

        </div>

    </div>
引用jquery库
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
js方法
<script type="text/javascript">

    var glume = function(banners_id, focus_id){
        this.$ctn = $('#' + banners_id);
        this.$focus = $('#' + focus_id);
        this.$adLis = null;
        this.$btns = null;
        this.switchSpeed = 5;//自动播放间隔(s)
        this.defOpacity = 1;
        this.crtIndex = 0;
        this.adLength = 0;
        this.timerSwitch = null;
        this.init();
    };
    glume.prototype = {
        fnNextIndex:function(){
            return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1;
        },
        //动画切换
        fnSwitch:function(toIndex){
            if(this.crtIndex==toIndex){return;}
            this.$adLis.css('zIndex', 0);
            this.$adLis.filter(':eq('+this.crtIndex+')').css('zIndex', 2);
            this.$adLis.filter(':eq('+toIndex+')').css('zIndex', 1);
            this.$btns.removeClass('on');
            this.$btns.filter(':eq('+toIndex+')').addClass('on');
            var me = this;

            $(this.$adLis[this.crtIndex]).animate({
                opacity: 0
            }, 1000, function() {
                me.crtIndex = toIndex;
                $(this).css({
                    opacity: me.defOpacity,
                    zIndex: 0
                });
            });
        },
        fnAutoPlay:function(){
            this.fnSwitch(this.fnNextIndex());
        },
        fnPlay:function(){
            var me = this;
            me.timerSwitch = window.setInterval(function() {
                me.fnAutoPlay();
            },me.switchSpeed*1000);
        },
        fnStopPlay:function(){
            window.clearTimeout(this.timerSwitch);
            this.timerSwitch = null;
        },

        init:function(){
            this.$adLis = this.$ctn.children();
            this.$btns = this.$focus.children();
            this.adLength = this.$adLis.length;

            var me = this;
            //点击切换
            this.$focus.on('click', 'a', function(e) {
                e.preventDefault();
                var index = parseInt($(this).attr('data-index'), 10)
                me.fnSwitch(index);
            });
            this.$adLis.filter(':eq('+ this.crtIndex +')').css('zIndex', 2);
            this.fnPlay();

            //hover时暂停动画
            this.$ctn.hover(function() {
                me.fnStopPlay();
            }, function() {
                me.fnPlay();
            });

            if($.browser.msie && $.browser.version < 7) {
                this.$btns.hover(function() {
                    $(this).addClass('hover');
                },function() {
                    $(this).removeClass('hover');
                });
            }
        }
    };
    var player1 = new glume('_banners', '_focus');    
    </script>