jquery切换焦点图

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
    $.Imgs = function (cfg) {
        //默认配置
        var defaultConfig = {
            imgWidth: 275, //图片宽
            imgHeight: 215, //图片高
            numAlpha: 1, //数字导航透明度，默认1，不透明
            numColor: '#ffffff', //导航数字颜色
            numBGColor: 'transparent', //导航数字背景颜色
            numFocusColor: '#ffffff', //导航数字获得焦点后的颜色
            numFocusBGColor: 'transparent', //导航数字获得焦点后背景颜色
            numPosition: 'right', //导航位置，默认右边
            numBLBGAlpha: .5, //导航背景透明度
            numBLBGColor: '#000000', //导航背景颜色
            delay: 8000, //切换时间
            tlFontSize: 13, //标题字体大小
            tlColor: '#ffffff', //标题字体颜色
            tlLineHeight: 25, //标题行高
            tlFontWeight: 'normal', //标题文本粗细
            showDT: true, //是否显示简介，设置为false后面2个配置不起作用
            dtHeight: 120, //简介高度
            dtLineHeight: 25//简介行高
        };
        cfg = $.extend(defaultConfig, cfg || {});
        if (cfg.numPosition != 'left' && cfg.numPosition != 'right') cfg.numPosition = 'right';
        this.instanceIndex = $.Imgs.instance++;
        var me = this;
        this.chrImage = function (a, arrIndex) {
            if (a && this.nowIndex == arrIndex) return false; var as = $('#dvNum' + this.instanceIndex + ' a');
            as.attr('class', '');
            if (a) {
                this.nowIndex = arrIndex; clearInterval(this.timer); a.className = 'numfocus';
                this.timer = setInterval(function () { me.chrImage(); }, cfg.delay);
            }
            else {
                me.nowIndex++;
                if (this.nowIndex >= me.arr.length) this.nowIndex = 0;
                as.eq(this.nowIndex).attr('class', 'numfocus');
            }
            $('#imgObj' + this.instanceIndex).fadeOut('normal', function () {
                $('#imgObj' + me.instanceIndex).attr('src', me.arr[me.nowIndex].img);
                $('#imgObj' + me.instanceIndex).fadeIn();
                if (me.arr[me.nowIndex].u) $('#imgHref' + me.instanceIndex + ',#wordHref' + me.instanceIndex).attr('href', me.arr[me.nowIndex].u);
                if (me.arr[me.nowIndex].tl) $('#wordHref' + me.instanceIndex).html(me.arr[me.nowIndex].tl);
                $('#imgObj' + me.instanceIndex).attr('alt', me.arr[me.nowIndex].tl ? me.arr[me.nowIndex].tl : '');
                if (me.dtID && me.arr[me.nowIndex].dt) $('#' + me.dtID).html('　　<a href="' + me.arr[me.nowIndex].u + '" target="_blank">' + me.arr[me.nowIndex].dt + '</a>');
            });
            return false;
        };
        //arr：JSON数组，示例[{tl:'标题',u:'链接地址',img:'图片地址',dt:'简介，如果建立实例的时候配置showDT为false可以不需要'}.....]
        this.init = function (arr) {
            if (typeof (arr) == 'undefined' || arr.length == 0) return false; this.arr = arr; this.nowIndex = 0;
            if (cfg.showDT) this.dtID = 'dvContent' + this.instanceIndex;
            document.write('<style type="text/css">'
            + '#imgContainer' + this.instanceIndex + '{position:relative;width:' + cfg.imgWidth + 'px;margin:0px auto;}'
            + '#imgContainer' + this.instanceIndex + ' .imgObj{height:' + cfg.imgHeight + 'px;width:' + cfg.imgWidth + 'px;display:block;border:none;}'
            + '#imgContainer' + this.instanceIndex + ' .alphabg{height:40px;filter:alpha(opacity:' + (cfg.numBLBGAlpha * 100) + ');opacity:' + cfg.numBLBGAlpha + ';background:#000;position:absolute;bottom:0px;width:100%;}'
            + '#imgContainer' + this.instanceIndex + ' .newstl{height:16px;padding-left:5px;padding-right:5px;width:' + (cfg.imgWidth - 10)
            + 'px;line-height:16px;overflow:hidden;position:absolute;bottom:2px;overflow:hidden;}'
            + '#imgContainer' + this.instanceIndex + ' .newstl a{color:yellow}'
            + '#imgContainer' + this.instanceIndex + ' .newstl a font{' + (arr[0].tl == '' ? '' : 'color:#fff;')
            + 'display:block;;font-size:10px;font-family: Arial,Helvetica,sans-serif;}'
            + '#imgContainer' + this.instanceIndex + ' .num{position:absolute;bottom:23px;' + cfg.numPosition + ':2px;font-weight:bold;font-size:13px;height:15px;}'
            + '#imgContainer' + this.instanceIndex + ' .num div{float:' + cfg.numPosition + ';}'
            + '#imgContainer' + this.instanceIndex + ' .num div a{float:left;width:15px;color:' + cfg.numColor + ';background:' + cfg.numBGColor + ';margin-left:5px;text-align:center;text-decoration:none;line-height:15px;filter:alpha(opacity:' + (cfg.numAlpha * 100) + ');opacity:' + cfg.numAlpha + ';outline:none;hideFocus:expression(this.hideFocus=true)}'
            + '#imgContainer' + this.instanceIndex + ' .num div a.numfocus{background:' + cfg.numFocusBGColor + ';color:' + cfg.numFocusColor + ';border:solid 1px #fff;}'
            + '#dvContent' + this.instanceIndex + '{margin:5px auto;line-height:' + cfg.dtLineHeight + 'px;width:' + cfg.imgWidth + ';height:' + cfg.dtHeight + 'px;overflow:hidden}</style>');
            document.write('<div id="imgContainer' + this.instanceIndex + '" class="imgContainer">'
            + '<a href="' + arr[0].u + '" target="_blank" id="imgHref' + this.instanceIndex + '">'
            + '<img alt="' + (arr[0].tl ? arr[0].tl : arr[0].entl ? arr[0].entl : '') + '" class="imgObj" id="imgObj' + this.instanceIndex + '" src="' + arr[0].img + '" />'
            + '</a>'
            + '<div class="alphabg"></div>'
            + '<div class="newstl"><a href="' + arr[0].u + '" target="_blank" id="wordHref' + this.instanceIndex + '" style="font-size:' + this.tlFontSize + 'px;">' + arr[0].tl + '</a></div>'
            + '<div class="num"><div id="dvNum' + this.instanceIndex + '"></div></div>'
            + '</div>'
            + (cfg.showDT ? '<div id="dvContent' + this.instanceIndex + '">　　<a href="' + arr[0].u + '" target="_blank">' + arr[0].dt + '</a></div>' : ''));
            var html = '<div>', pNode = $('#dvNum' + this.instanceIndex).get(0), a;
            for (var i = 0; i < arr.length; i++) {
                a = document.createElement('a');
                if (i == 0) a.className = 'numfocus'; a.innerHTML = i + 1; a.href = 'javascript:void(0)'; a.setAttribute('idx', i);
                if (arr.length > 1) a.onclick = function () { me.chrImage(this, parseInt(this.getAttribute('idx', 10))); };
                pNode.appendChild(a);
            }
            if (arr.length > 1) {
                this.timer = setInterval(function () { me.chrImage(); }, cfg.delay);
                for (var i = 1, j = arr.length; i < j; i++) new Image().src = arr[i].img;
            }
        }
    };
    $.Imgs.instance = 0;
</script>
<script>
    var arrData = [
    { tl: '刷墙漆臭满屋 怎解释？', u: 'http://www.lvzhou168.com/zixun/20130408/22520.aspx', img: 'http://www.lvzhou168.com/upload/20121105/15-12110516160YE.jpg', dt: '最近济南的张先生买了无味墙漆装修新房，没想到刷墙之后屋里竟满是臭味，一家人只能出去租房住。对此，销售商也说不清楚为啥，或许与天气潮湿有关。张先生说，让他闹心的就是就是自己新装修房子的墙漆味。由于油漆的味道太呛，人在屋里睡觉没法睡，他只能每天晚上住旅馆。然而，据张先生介绍，厂家现在...' },
    { tl: '无纺布墙纸都环保？', u: 'http://www.lvzhou168.com/zixun/20130408/22517.aspx', img: 'http://www.lvzhou168.com/upload/20121106/15-12110615402M35.jpg', dt: '墙纸市场中无纺布墙纸逐渐成为了客户的最爱。一说到无纺布墙纸，想到的首先就是环保。但是实际上并不是每一款无纺布的产品都非常环保。目前墙纸市场上的产品主要由无纺布和PVC两种材质构成，无纺布相较PVC则更加环保，但是这种环保更多的是体现在对自然环境的保护而不是对人体无害。其制作工艺决...' },
    { tl: '地毯点缀家居 带来融融暖意', u: 'http://www.lvzhou168.com/zixun/20130408/22516.aspx', img: 'http://www.lvzhou168.com/upload/20121105/15-12110516331R12.jpg', dt: '周末大降温，很多城市都被白雪覆盖，气温嗖的一下就降至了个位数甚至负数。寒意袭来，家里也是时候增添暖意了。不管你家的地面是什么材质，抛光砖、木地板抑或鹅卵石，铺上一块柔软舒适的地毯，可以让室内顷刻间暖意融融。只要掌握了好方法，地毯因为其材质上的问题在使用上造成的一些小麻烦也能被轻易...' },
    { tl: '男童洗澡爱看浴霸 强光致失明', u: 'http://www.lvzhou168.com/zixun/20130408/22513.aspx', img: 'http://www.lvzhou168.com/upload/20121106/15-12110615541Q39.jpg', dt: '宋女士有个儿子叫松松，由于天气渐渐转凉，而松松又太小，所以宋女士在给儿子洗澡时，就会把浴室的浴霸打开。这个季节，松松洗澡的频率要少一些，平均四五天洗一次，每次十到二十分钟。为保持浴室的温度，洗澡时浴霸会一直开着。但宋女士注意到，松松在洗澡时，会一直盯着浴霸看。一直都没觉得有什么，...' },
    { tl: '当心地板霸王条款', u: 'http://www.lvzhou168.com/zixun/20130408/22509.aspx', img: 'http://www.lvzhou168.com/upload/20121105/15-12110515494J09.jpg', dt: '很多消费者都在安装地板的时候遇到了这样的潜规则，即明明已经预算好了家里地板的平方，可等到安装师傅上门进行测量上门安装时总会多出实际平方的好几平米，等到安装完毕后，又总会浪费掉很多断头长条。对此，安装师傅总是回答的很含糊，有的甚至说这是公司规定的，自己也没有办法。另外还存在设置最低...'}];
　　//测试，将js代码放到你需要放焦点图的位置
    var img1 = new $.Imgs();
    img1.init(arrData);
    img1 = new $.Imgs({ showDT: false, numPosition: 'left' }); //不显示简介，导航左边
    img1.init(arrData);
</script>