gpt4 book ai didi

javascript - 在 javascript 图像 slider 中在图像上显示文本的问题

转载 作者:太空宇宙 更新时间:2023-11-04 03:42:19 25 4
gpt4 key购买 nike

这是我的 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 slider函数是预定义函数,基本上我想实现this

最佳答案

这就是你总是阅读文档的原因:

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

Captions are set through each slide image's alt attribute. If the image is formatted as lazy loaded image, its caption can be defined by the title or data-alt attribute:

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 - 在 javascript 图像 slider 中在图像上显示文本的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24694722/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com