在页面加载时更改文本和图像

时间:2013-07-18 08:14:27

标签: javascript

我在我的网站上添加了一个引用,我希望每次都能更改引用。这有效。但是现在我还想添加一个随文本变化的图片。 (它必须是具有相同文本的相同图片)。

我该怎么做?

我的代码:

<script type=text/javascript> 
var delay="10"; //how many seconds you wnat the delay to be
var count='0';
var Texts=new Array();
Texts[0]="Je voelt je hier geen nummer, maar eerder een kleine schakel binnen een groot bedrijf";
Texts[1]="Hier komt een tweede quote van een medewerker";
Texts[2]="Hier komt een derde quote van een medewerker";
function changeText(){
document.getElementById('quote').innerHTML=Texts[count];
count++;
if(count==Texts.length){count='0';}
setTimeout("changeText()",delay*1000);
}
</script>
<body onLoad="changeText();">
<h3 id="quote"></h3>

感谢名单! Annelies

3 个答案:

答案 0 :(得分:2)

Demo

创建<img>元素并更改数据结构:

var delay="10"; //how many seconds you wnat the delay to be
var count=0;
var Texts = [];
Texts.push({ image : 'image1.jpg', text : 'Je voelt je hier geen nummer, maar eerder' });
Texts.push({ image : 'image2.jpg', text : 'Je voelt je hier' });
Texts.push({ image : 'image3.jpg', text : 'Je voelt je hier geen nummer, maa' });

function changeText(){
    document.getElementById('quote').innerHTML=Texts[count].text;
    document.getElementById('image').src=Texts[count].image;
    count++;
    if(count==Texts.length){count=0;}
    setTimeout(changeText,delay*1000);
}

HTML:

<h3 id="quote"></h3>
<img src="" id="image" />

附注:

  • []语法(如果首选用于创建数组var Texts = []
  • 使用Texts.push(),您可以附加到数组,而无需每次都设置下一个键
  • 不要将字符串传递给setTimeout,而是传递不带引号或括号的函数名称。
  • count设置为0时,请勿将其包装在引号中,因为这会将其设置为字符串。

答案 1 :(得分:0)

像这样......

    <script type=text/javascript> 
    var delay="10"; //how many seconds you wnat the delay to be
    var count='0';
    var Texts=new Array();
    Texts[0]={ "text" : "Je voelt je hier geen nummer, maar eerder een kleine schakel binnen een groot bedrijf", "img" : "<your img1 path>"};
    Texts[1]={ "text" : "Hier komt een tweede quote van een medewerker", "img" : "<your img2 path>"};
    Texts[2]={ "text" : "Hier komt een derde quote van een medewerker", "img" : "<your img3 path>"};
    function changeText(){
        document.getElementById('quote').innerHTML=Texts[count].text;
        document.getElementById("your_img_tag_id").src = Texts[count].img;
        count++;
        if(count==Texts.length){count='0';}
        setTimeout("changeText()",delay*1000);
    }
</script>

答案 2 :(得分:0)

另一个问题:现在,每次重新加载时,都会从第一张图片和引号开始。有没有办法改变这个?因此,当浏览器加载时,它会选择随机图片并引用?

Annelies