在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幻燈片上添加文本右圖幻燈片

回答

相關問題