0

私は現在、ページの前面にテキストのサイドバーが付いた紹介ヘッダーが表示されているWebページを作成しています。

問題は、ページが構成する画像と情報の量のために、いくつかのヘッダーがあるということです。さまざまな人々が私のページにアクセスするときに、壮大な物語をめくりたいと思います。

これを行うために、現在、問題なくImageヘッダーを自動的に変更することができるJSスクリプトを実行しています。しかし、最近、画像に何らかの説明を追加することにしたので、画像だけでなくテキストも変更する必要があります。

簡単に思えるかもしれませんが、とにかく私にとってはそうではないことを保証します。

スクリプトとその影響を受ける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>
4

1 に答える 1

0

このようなもの？

(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 
      }
     }
}())
于 2012-10-15T14:04:35.277 に答える