Javascript 向超大jquery图像幻灯片添加html文本

我只想将html文本添加到著名的图像滑块中

这是他们的演示页面：

html可以代替演示中的“media temple（ve）服务器”文本

我还试图在文本中添加一些漂亮的动画

但我不知道在哪里编写html以及如何将其添加到幻灯片中，以便每个图像都有自己的html附加到它

在实现我所说的内容时，他们的API对我来说似乎也很模糊

---

有人吗？

你有你正在处理的页面的示例-代码还是实例

要为每个图像指定不同的文本，您需要在javascript中添加title属性，演示中的示例如下-

 [ // Slideshow Images
{image : 'http://example.com/example.jpg', title : 'ADD A CAPTION HERE', thumb : 'http://example.com/example.jpg', url : 'http://www.example.com'}
]

要为所有图像添加文本覆盖，请执行以下操作：

尝试在主体中创建一个div-

<div id="message-box">Hi, this is my text.</div>

---

z索引应确保div显示在超大背景图像的顶部。

您可以在页面上编写任何您想要的内容，如

。

如果您有原始demo.html页面，则此ul block就是它。

我也遇到了同样的问题，并想出了这个非常低劣的解决方案。。。 它可以工作，但可以大大改进

我更改了每张幻灯片的脚本，以包含项目的id号，如下所示：

{image : 'content/pic1.jpg', title : 'title here', url : '', proj_id : '#projectID#'},

slides:[// Slideshow Images
            {image : 'images/index_1.jpg', proj_id : '1'},
            {image : 'images/index_2.jpg', proj_id : '2'},
            {image : 'images/index_3.jpg', proj_id : '3'}

（请记住，这只是一个示例……我使用asp动态填充幻灯片列表）

然后在supersize.shutter.js中，我在行后面添加了

afterAnimation : function(){

这个

---

其中#brief_holder是一个空div，project_brief.asp从源代码中提取描述。

感谢dogs的回答，我用以下方式改进脚本：

在supersize.shutter.js的第一行中添加以下内容

desctext = function() {
    var projID = api.getField('proj_id');
        var url = "slide_return.php?id="+projID;
        $('#brief_holder').load(url);
};

然后排队

 _init : function(){

将此添加到加载第一个图像的描述

desctext;  

下线

 if (vars.slide_current.length){
            $(vars.slide_current).html(vars.current_slide + 1);
        }

加

现在与dogs脚本相同，包括描述的id号，如下所示：

{image : 'content/pic1.jpg', title : 'title here', url : '', proj_id : '#projectID#'},

slides:[// Slideshow Images
            {image : 'images/index_1.jpg', proj_id : '1'},
            {image : 'images/index_2.jpg', proj_id : '2'},
            {image : 'images/index_3.jpg', proj_id : '3'}

]

创建一个名为slide_return.php的页面，代码如下：

switch($_GET['id']){
case "1":
    echo "<h1><a href='#'>Text Link for slide 1</a></h1>";
break;
case "2":
    echo "<h1><a href='#'>Text Link for slide 2</a></h1>";
break;
case "3":
    echo "<h1><a href='#'>Text Link for slide 3</a></h1>";
break;

开关（$\u GET['id']））{
案例“1”：
回声“；
打破
案例“2”：
回声“；
打破
案例“3”：
回声“；
打破

}

---

最后，在幻灯片的同一页中放置一个空白的div#brief _holder。

幻灯片的演示页就是我的例子。如何为幻灯片中的每个图像添加不同的文本？你的代码能做什么？所有图像的文本相同>查看关于每个图像的不同文本的修订答案。标题已经存在，，，并且不同图像的不同标题在演示幻灯片上显示得很好。我找不到任何解决我问题的办法。。。。如何为每个图像创建一个独特的文本，以便以吸引人的方式显示在图像本身上？每个图像都有不同的文本。那怎么办？

switch($_GET['id']){
case "1":
    echo "<h1><a href='#'>Text Link for slide 1</a></h1>";
break;
case "2":
    echo "<h1><a href='#'>Text Link for slide 2</a></h1>";
break;
case "3":
    echo "<h1><a href='#'>Text Link for slide 3</a></h1>";
break;