0

我有这个 Javascript 滑动图像脚本。它效果很好，但我想以段落标签的形式将文本添加到滑动效果中，幻灯片中的每个图像都有一个段落。怎么做？我的代码：

<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 示例。

我在您的 HTML 中添加了一个 ID 为“文本”的新段落元素，并在您的 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 回答