在 Supersized 3.2 的每个页面上添加文本 - 全屏幻灯片 jQuery答案

【问题标题】：adding text on each page of Supersized 3.2 – Fullscreen Slideshow jQuery在 Supersized 3.2 的每个页面上添加文本 - 全屏幻灯片 jQuery
【发布时间】：2014-03-05 05:43:47
【问题描述】：

我正在寻找有关超大幻灯片 Jquery 的答案。我想在每张幻灯片上添加每个 HTML/TEXT。（即，如果有 4 页，每张幻灯片将嵌入 4 个单独的文本。）

我知道在“将html文本添加到超大的jquery图像滑块之前有一个讨论。

Re：将 html 文本添加到超大的 jquery 图像幻灯片 adding html text to supersized jquery image slide

我遵循了指示，但我不明白创建“php”页面和“在幻灯片的同一页面中放置一个空白 div #brief_holder”。部分。另外，我很好奇这段代码真的有效......

有没有人解决了这个问题并为我找到了答案...？

非常感谢您的好意，期待您的回音。

最好，邦妮

【问题讨论】：

能否提供创建幻灯片的代码？
@user3381913 每张图片的文字会有所不同吗？

标签： javascript php jquery slide supersized

【解决方案1】：

这是一个粗略的示例，因此您可以了解如何执行此操作。抱歉，我无法让 fsfiddle 与超大尺寸一起正常工作，所以转到 http://buildinternet.com/project/supersized/slideshow/3.2/slide.html 并将下面的代码粘贴到 chrome 开发控制台中。实现时，应该在加载超大尺寸后运行。

var slide_text_array = [ 'slide 1 text', 'slide 2 text', 'slide 3 text', 'slide 4 text', 'slide 5 text', 'slide 6 text', 'slide 7 text', 'slide 8 text', 'slide 9 text', 'slide 10 text' ];

$('#supersized li a img').each( function(i,slide_img){ //get each loaded slide
    $(slide_img).css('z-index', '100');//to make the image appear behind the text
    var slide_a = $(slide_img).parent()
    $(slide_a).prepend('<h1 style="font-size: 100px; z-index: 200; position: absolute;">'+ slide_text_array[i] +'</h1>'); //insert text
});

您可以在每张幻灯片开始之前添加文本，而不是在超大加载后循环播放所有幻灯片。看看http://buildinternet.com/project/supersized/docs.html#theme-before 但这应该能让你继续前进。如果您仍有问题，请尝试设置 jsfiddle.net 或 codepen 示例，以便我们为您编辑。祝你好运！

【讨论】：