0

このJavascriptスライド画像スクリプトがあります。それはうまく機能しますが、スライド内の各画像に付随する 1 つの段落をスライド効果に段落タグの形式でテキストを追加したいと思います。どうやってするか？私のコード:

<script language="JavaScript">
var image = new Array("images/ref1.png", "images/ref2.png", 
                "images/bb.png", "images/windows.png")
                var imgNumber=1     
                var numberOfImg = image.length                  

                function previousImage(){
                  if(imgNumber > 1){
                    imgNumber--
                    }

                  else{
                    imgNumber = numberOfImg
                    }

                  document.slideImage.src = image[imgNumber-1]                              
                  }

                function nextImage(){
                  if(imgNumber < numberOfImg){
                    imgNumber++
                    }

                  else{
                    imgNumber = 1
                    }

                  document.slideImage.src = image[imgNumber-1]  
                  }

                if(document.images){                                       
                   var image1 = new Image()                                        
                   image1.src = "images/ref1.png"
                   var image2 = new Image()
                   image2.src = "images/ref2.png"
                   var image3 = new Image()
                   image3.src = "images/bb.png"
                   var image4 = new Image()
                   image4.src = "images/windows.png"
                   }
</script>
<table>
        <tr>
          <td><img src="images/ref1.png" name="slideImage"></td>
        </tr>
        <tr>
          <td><a href="JavaScript:previousImage()">
          <img src="" border="none"/>prev</a>
          </td>
          <td><a href="JavaScript:nextImage()">
          <img src="" border="none" />next</a>  
          </td>
        </tr>
</table>

ありがとうございました

4

1 に答える 1

1

基本的に、テキストを保持する要素、回転するテキストを含む配列を追加し、JavaScript を少し追加して変更を加えるだけです。

jsFiddleの例を次に示します。

ID が「テキスト」の新しい段落要素を HTML に追加し、JavaScript でテキストを保持する配列を作成しました。この行を使用すると、画像と同じようにテキストが変更されますdocument.getElementById('text').innerHTML = text[imgNumber - 1];。

JavaScript :

var image = new Array("http://www.dummyimage.com/60x60/&text=1", "http://www.dummyimage.com/60x60/&text=2", "http://www.dummyimage.com/60x60/&text=3", "http://www.dummyimage.com/60x60/&text=4");
var text = new Array('one', 'two', 'three', 'four');
var imgNumber = 1;
var numberOfImg = image.length;

function previousImage() {
    if (imgNumber > 1) {
        imgNumber--;
    }
    else {
        imgNumber = numberOfImg;
    }
    document.slideImage.src = image[imgNumber - 1];
    document.getElementById('text').innerHTML = text[imgNumber - 1];
}
function nextImage() {
    if (imgNumber < numberOfImg) {
        imgNumber++;
    }
    else {
        imgNumber = 1;
    }
    document.slideImage.src = image[imgNumber - 1];
    document.getElementById('text').innerHTML = text[imgNumber - 1];
}
if (document.images) {
    var image1 = new Image();
    image1.src = "http://www.dummyimage.com/60x60/&text=1";
    var image2 = new Image();
    image2.src = "http://www.dummyimage.com/60x60/&text=2";
    var image3 = new Image();
    image3.src = "http://www.dummyimage.com/60x60/&text=3";
    var image4 = new Image();
    image4.src = "http://www.dummyimage.com/60x60/&text=4";
}​
于 2012-05-25T15:49:16.037 に答える