在Javascript幻灯片上添加文本_Javascript_Html_Css

在Javascript幻灯片上添加文本

javascript html css

在Javascript幻灯片上添加文本,javascript,html,css,Javascript,Html,Css,我试着在javascript幻灯片上添加一些文本，但不知怎么的，没有成功。文本显示在顶部，幻灯片在文本下方循环播放如何使文本显示在图像上？请看一看 <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar.gif" var

我试着在javascript幻灯片上添加一些文本，但不知怎么的，没有成功。文本显示在顶部，幻灯片在文本下方循环播放

如何使文本显示在图像上？请看一看

<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar.gif"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<div style="width:100px; height:56px">
    <div style="width:100px; height:56px; z-index:2">Tring to add some text on the top
        <div style="width:100px; height:56px; z-index:1">
              <img src="firstcar.gif" name="slide" width="100" height="56" />
        </div>
    </div>
</div>
<script>
<!--

var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",1500)
}
slideit()
//-->
</script>
</body>
</html>


尝试在顶部添加一些文本

如果要使用z索引，可能需要位置：绝对

或者，您可以将img的高度降低到小于文本的div容器的高度

试试这个：

 <body>
 <div style="width:100px; height:56px">
 <div style="position:absolute; z-index:2">Tring to add some text on the top

</div>
 <div style="position: absolute;width:100px; height:56px; z-index:1">
          <img src="firstcar.gif" name="slide" width="100" height="56" />
    </div>
</div>
</body>


尝试在顶部添加一些文本

将要添加的文本移动到图像元素下方的元素中，给它绝对定位，给包含的div相对定位，并使用top、left、right或bottom来定位文本

HTML:

我使用了position:absolute作为z索引和缩小幻灯片的大小，但它仍然不起作用。你有任何css文件的链接吗？或者在头部的样式部分？你能澄清一下你想要文本在图像上方（不接触）还是在图像上方吗？我的意思是文本正好显示在图像上。很高兴它有帮助。只是提醒一下，如果这已经回答了问题，记得“接受”答案。

<div class="container">
    <img src="firstcar.gif" name="slide" width="100" height="56" />
    <span>Added Text Here</span>
</div>

div.container {
    position: relative;
}
span {
    position: absolute;
    top: 0;
}