在JavaScript幻灯片上添加文本右图幻灯片

我尝试在javascript幻灯片上添加一些文本，但不知何故，它不工作。文本显示在顶部，幻灯片显示在文本下面循环播放。在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>

来源

2013-10-16 abcid d

可以的，如果你想要的文字为图像（不接触）你上面澄清或在图像的顶部？ –

我的意思是文字在图像上显示正确。 –

您的概率需要的位置是：如果你想使用的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>

来源

2013-10-16 00:08:39 JungJoo

我已经使用位置：绝对两个Z指数和减少幻灯片的大小，但它仍然无法正常工作。 –

你有链接到任何CSS文件？或头部样式部分？ – JungJoo

对不起，我没有 –

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

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; 
}

来源

2013-10-16 03:27:29

是的，它的工作原理！非常感谢Josh！ –

很高兴帮助。提醒一下，如果这回答了问题，请记住“接受”答案。 –

在JavaScript幻灯片上添加文本右图幻灯片

回答

相关问题