Question

这是我的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

Answer 1

这就是您经常阅读文档的原因：

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

通过每张幻灯片图片的alt属性设置字幕。如果图像格式为延迟加载图像，其标题可以定义 title或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

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

1 个答案: