在 javascript 图像滑块中的图像上显示文本的问题答案

【问题标题】：Issue in displaying text over images in javascript image slider在 javascript 图像滑块中的图像上显示文本的问题
【发布时间】：2014-07-11 18:58:58
【问题描述】：

这是我的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Demo slider</title>
    <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/1/js-image-slider.js" type="text/javascript"></script>

</head>
<body>
    <div id="sliderFrame">
        <div id="slider">
            <img src="images/image-slider-1.jpg" id="img1" alt="" />
            <img src="images/image-slider-2.jpg" id="img2" alt="" />
            <img src="images/image-slider-3.jpg" id="img3" alt="" />
            <img src="images/image-slider-4.jpg" id="img4" alt="" />
            <img src="images/image-slider-5.jpg" id="img5" alt="" />
        </div>
    </div>
    <div id="custom_text">
        <h1 style="color: blue;">Image 1 text</h1>
    </div>
    <div id="custom_text1">
        <h1 style="color: blue;">Image 2 text</h1>
    </div>
    <div id="custom_text2">
        <h1 style="color: blue;">Image 3 text</h1>
    </div>
    <div id="custom_text3">
        <h1 style="color: blue;">Image 4 text</h1>
    </div>
    <div id="custom_text4">
        <h1 style="color: blue;">Image 5 text</h1>
    </div>
</body>
</html>

使用 menucool 的 Javascript Image Slider 库：link to site

我想在不同的图像上显示不同的文本，我尝试将绝对和相对位置分配给 div 和 img 标签，但无法实现输出。

javascript滑块功能是预定义的功能。基本上我想实现this

【问题讨论】：

mcImgSlider 来自哪个库？一个来自menucool？最好引用指向可用源的链接，例如主网站和/或文件的 CDN 链接，然后将其包含在代码 sn-p 中。
IF Possible，创建一个 jsfiddle 链接。它将始终帮助您获得更多帮助和准确的解决方案。
@Popeye 无法创建 JSfiddle 我尝试过，但其中存在一些问题。
@PatrickEvans 好吧，以后会记住这一点
@Fresher：你能分享一下你的屏幕是什么样子的吗？

标签： javascript html css

【解决方案1】：

这就是为什么你总是阅读文档的原因：

http://www.menucool.com/javascript-image-slider#view2

标题是通过每个幻灯片图像的 alt 属性设置的。如果图像被格式化为延迟加载图像，其标题可以定义为标题或 data-alt 属性：

HTML

<img src="//placehold.it/250x250" id="img1" alt="Caption one" />
<img src="//placehold.it/249x249" id="img2" alt="Caption two" />
<img src="//placehold.it/251x251" id="img3" alt="Caption three" />
<img src="//placehold.it/248x248" id="img4" alt="Caption four" />
<img src="//placehold.it/252x252" id="img5" alt="Caption five" />

JSFiddle Demo

【讨论】：

谢谢你指导我的好人。对于未来我会一直阅读手册只有一个问题，尽管图像上使用的效果 menucool 是由他们预定义的。我可以更改它们吗？