Question

我现在正在处理一个网页，我在页面前面显示了一个介绍性标题，其中包含一个文本侧边栏。

问题在于我有几个标题，由于页面所包含的图像和信息量，我想在不同的人访问我的页面时翻阅宏大的故事。

要做到这一点，我现在有一个运行的JS脚本，它可以自动更改Image标头而不会出现任何问题。但是，由于我最近决定在图像中添加某种描述，我现在不仅需要更改图像，还需要更改文本。

看起来似乎很容易，但我向你保证不是，不管怎么说都不适合我。

这是脚本和受其影响的html。

的Javascript

(function(){
var rotator = document.getElementById('bigImage');
var imageDir = '../images/';
var delayInSeconds = 5;
var images = ['1.png', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.png'];
var num = 0;
var changeImage = function() {
var len = images.length;
bigImage.src = imageDir + images[num++];
if (num == len)
{num = 0;} 
};
setInterval(changeImage, delayInSeconds * 1000);
})();

HTML

<div class="image-container">       
<a href="../Html/1.html"><img src="../images/1.png" height="300"    
width="650" id="bigImage";/></a>

<div id="text">
<div id="text-box">
<p></p>
</div>
</div>

Answer 1

这样的事情？

(function(){
  var rotator = document.getElementById("bigImage")
    , textBox = document.getElementById("text-box") //SELECT THE TEXT BOX
    , imageDir = "../images/"
    , delayInSeconds = 5
    , images = []
    , len = images.length
    , num = 0 //why this?
    , changeImage = function(delay){
      bigImage.src= imageDir + images[num++]
      textBox.innerhtml = "hello from image nr:"+num //SET TEXTBOX CONTENT
      if(num === len){
        num = 0 
      }
     }
}())

同时更改一个图像标题和一个文本标题

1 个答案: