在Javascript幻灯片放映上添加文本

时间:2013-10-16 00:02:16

标签: 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 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>

2 个答案:

答案 0 :(得分:0)

你需要的位置:绝对的,如果你想使用z-index

或者你可以将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>

答案 1 :(得分:0)

将要添加的文本移动到图像元素下方的元素中,给它绝对定位,给出包含div的相对位置,并使用顶部,左侧,右侧或底部定位文本。

HTML:

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

CSS:

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