在javascript图像滑块中显示文本超过图像的问题

Issue in displaying text over images in javascript image slider

本文关键字：图像 文本 问题 javascript 显示      更新时间：2023-09-26

这是我的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图像滑块库:链接到站点

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

javascript slider函数是预定义函数。基本上我想实现这个

这就是为什么你总是阅读文档:

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演示

相关文章：