Question

我正在尝试修改jQuery List Rotator，因为它似乎已经放弃了该项目。默认情况下，幻灯片图像可以是超链接的，但是，显示在幻灯片顶部的文本不会被超链接。我已经找到了部分解决方案。

我将结果div包装在一个锚标签中。我想出了代码中修改href属性的位置，至少它似乎可以工作，如果我为链接添加静态文本。我无法弄清楚的是如何将为图像指定的超链接应用到包装文本div的新锚标记。

    //init main screen
    ListRotator.prototype.initMainScreen = function() {
        var content =  "<div class='preloader'></div>\
                        <div class='timer'></div>\
                        <div class='textbox'>\
                            <a href='#'>\
                            <div class='inner-bg'></div>\
                            <div class='inner-text'></div>\
                            </a>\
                        </div>\
                        <div class='cpanel'>\
                            <div class='play-btn'></div>\
                            <div class='num-info'></div>\
                        </div>";
        this._$screen.append(content).css({width:this._screenWidth, height:this._screenHeight});
        this._$preloader = this._$screen.find(">.preloader");
        this.initTimerBar();
        this._$textBox = this._$screen.find(">.textbox");
        this._$innerText = this._$textBox.find(".inner-text");

        this._$strip = $("<div class='strip'></div>");
        if (this._defaultEffect == "h.slide") {
            this._$screen.append(this._$strip);
            this._$strip.css({width:2*this._screenWidth, height:this._screenHeight});
            this._$listItems.removeAttr("effect");
        }
        else if (this._defaultEffect == "v.slide"){
            this._$screen.append(this._$strip);
            this._$strip.css({width:this._screenWidth, height:2*this._screenHeight});
            this._$listItems.removeAttr("effect");
        }
        else {
            this._$mainLink = $("<a href='#'></a>");
            this._$screen.append(this._$mainLink);
        }
        this.initCPanel();          
    }

    //update text box
    ListRotator.prototype.updateText = function(e) {
        var that = e.data.elem;
        if (!that._$textBox.data("visible")) {
            that._$textBox.data("visible", true);
            var text = that._$listItems.eq(that._currIndex).find(">div:hidden").html();

            //alert(that._$textBox.data("imgurl"));
            if (text && text.length > 0) {          
                var data = that._$listItems.eq(that._currIndex).data("textbox");
                that._$innerText.css("color",data.color);
                that._$textBox.find(">.inner-bg").css({"background-color":data.bgcolor, height:data.h+2});
                that._$textBox.find("a").attr('href', 'IWantTheDynamicLinkHere.html');  ///////////////////////
                switch(TEXT_EFFECTS[that._textEffect]) {
                    case TEXT_EFFECTS["fade"]:
                        that.fadeInText(text, data);
                        break;
                    case TEXT_EFFECTS["down"]:
                        that.expandText(text, data, {width:data.w, height:0}, {height:data.h});
                        break;
                    case TEXT_EFFECTS["right"]:
                        that.expandText(text, data, {width:0, height:data.h}, {width:data.w});
                        break;
                    case TEXT_EFFECTS["left"]:
                        that.expandText(text, data, {"margin-left":data.w, width:0, height:data.h}, {width:data.w, "margin-left":0});
                        break;
                    case TEXT_EFFECTS["up"]:
                        that.expandText(text, data, {"margin-top":data.h, height:0, width:data.w}, {height:data.h, "margin-top":0});
                        break;  
                    default:
                        that.showText(text, data);
                }
            }                   
        }
    }

Answer 1

没关系，想通了。我能够从原始数据中获取URL。

在JQuery List Rotator中链接幻灯片文本

1 个答案: