我正在尝试修改 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);
}
}
}
}