javascript - 更改页面加载时的文本和图像

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

谢谢! 安妮莉丝

最佳答案

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 ,不要将其用引号引起来,因为这会将其设置为字符串。

关于javascript - 更改页面加载时的文本和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17718103/

相关文章:

javascript - Angular4中三种类型的数据绑定(bind)指令 : [val] , [(val)] , (val) 有什么区别

javascript - 解析 html 元素中的 data-i18n 属性

javascript - 需要连接d3中不同圆形打包布局的两个节点以及打包布局折叠/展开

javascript - 为什么这个 Node.js tcp 服务器在关闭之前不会写回 Java 客户端?

书签需要 JavaScript 帮助

javascript - 我如何解决此 MarkerCluster checkin / checkout 错误(传单销售人员)?

javascript - Fullcalendar onclick事件标题警报ID被点击的标题

javascript - Chrome : get URL of active content script tab

javascript - 如何在 ionic 3 中将视频文件从 ios 转换为 base64

javascript - 如何动态插入HTML代码?